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

最新推荐文章于 2024-11-07 16:00:25 发布

原创最新推荐文章于 2024-11-07 16:00:25 发布 · 5.7k 阅读

13 ·

CC 4.0 BY-SA版权

优快云-WanFengZhou-2021-LastDay

文章标签：

#uni-app

uni-app 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在uni-app中将图片路径转换为Base64字符串的方法，通过使用image-tools插件实现，解决了前端上传图片时路径与后端需求不匹配的问题。

在用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