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