uniapp - H5和微信小程序上传 base64 图片

1. 前言

在做订单评论的时候，需要图片上传，开始使用的 FormData 上传，但是后端一直获取不到上传的 file ，由于之前是使用 taro 开发的H5和微信小程序，所以对 uniapp 开发不是很熟悉，使用了创建 input 标签，然后设置属性，来获取图片，最后提交上传。结果发现还是提交不成功，最后发现在 taro 那边使用的将图片转换为 base64 ，然后再提交上传，就按照这个思路实现。

2. H5 将选择图片转 base64

2.1 使用 XMLHttpRequest 和 FileReader 实现图片转 base64

// H5端获取图片的base64
function getWebBase64 (filePath) {return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest();xhr.open('GET', filePath, true);xhr.responseType = 'blob';xhr.onload = function() {if (this.status === 200) {let fileReader = new FileReader();fileReader.onload = function(e) {resolve(e.target.result);}fileReader.onerror = reject;fileReader.readAsDataURL(this.response);}}xhr.onerror = reject;xhr.send();})
}

2.2 使用 fetch 和 FileReader 实现图片转 base64

// H5端获取图片的base64
function getWebBase64 (filePath) {return new Promise((resolve, reject) => { fetch(filePath).then(fetchRes => {return fetchRes.blob()}).then(data => {let fr = new FileReader()fr.onload = function(){resolve(fr.result)}