uniapp 上传 base64 图片

news2024/11/18 21:09:19

在图片裁剪时候返回的是base64文件需要上传到obs一般出现在h5网页端

可以直接使用 js 原始解决应该只可以在h5浏览器内使用

// 提取 Base64 编码部分
const base64Data = e.tempFilePath.replace(/^data:image\/(\w+);base64,/, "");
// 将 Base64 编码转换为 ArrayBuffer
const binary = atob(base64Data);
const array = [];
for (let i = 0; i < binary.length; i++) {
  array.push(binary.charCodeAt(i));
}
const buffer = new Uint8Array(array).buffer;
// 创建一个 Blob 对象
const blob = new Blob([buffer], { type: 'image/png' });
// 创建一个 URL 指向 Blob 对象
let url =URL.createObjectURL(blob);

//这里会把base64变成一个png图片的临时地址，后面就可以上传了
console.log(url);

使用 image-tools 工具，可用于 uni-app、微信小程序、5+APP、浏览器（需允许跨域）。

第一步：安装

npm i image-tools --save

第二步：引入

npm i image-tools --save
或者下载后按包引入
// 以下路径需根据项目实际情况填写
import { pathToBase64, base64ToPath } from '../../js/image-tools/index.js'

第三步：使用

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)
  })