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