解决uni-app在App端上传图片时路径转Base64的问题

清疚 2022-12-27 14:04 658阅读 0赞

**在用uni-app开发项目的时候大家都会遇到这么一个问题，  
就是上传图片时在App上拿到的是文件路径，  
然而后端要接收的却是Base64字符串，  
这就尴尬了，在App端又无法调用Web Api（例如：Blob fileReader 等），  
自己写插件的话又很麻烦，因此我找了很久才找到下面这个可以直接将Path转为Base64的插件。**

## image-tools ##

**npm安装**

npm i image-tools --save

**文件内引入**

import { pathToBase64, base64ToPath } from 'image-tools'

**`pathToBase64`  
从图像路径转换为base64，uni-app、微信小程序和5+APP使用的路径不支持网络路径，如果是网络路径需要先使用下载API下载下来。**

pathToBase64(path).then(base64 => {
        console.log(base64)
    })
    .catch(error => {
        console.error(error)
    })

**`base64ToPath`  
将图像base64保存为文件，返回文件路径。**

base64ToPath(base64).then(path => {
        console.log(path)
    })
    .catch(error => {
        console.error(error)
    })

## 可以利用promise来串行和并行的执行多个任务 ##

// 并行
    Promise.all(paths.map(path => pathToBase64(path)))
      .then(res => {
        console.log(res)
        // [base64, base64...]
      })
      .catch(error => {
        console.error(error)
      })
    // 串行
    paths.reduce((promise, path) => promise.then(res => pathToBase64(path).then(base64 => (res.push(base64), res))), Promise.resolve([]))
      .then(res => {
        console.log(res)
        // [base64, base64...]
      })
      .catch(error => {
        console.error(error)
      })

**插件地址：[https://www.npmjs.com/package/image-tools][https_www.npmjs.com_package_image-tools]**

[https_www.npmjs.com_package_image-tools]: https://www.npmjs.com/package/image-tools