常见图片上传（根据arrarbuffer转base64,根据图片url转blob或formdata)学习总结之地球是个圆url-＞blob-＞formdata-＞Arraybuffer-＞base64_图片buffer转base64

1.根据ArrayBuffer 转base64显示 常见需求：有时后端的图片接口返回的不是url，可能是二进制文件或ArrayBuffer

let src =
      'data:image/png;base64,' +
      window.btoa(
        new Uint8Array(error).reduce(
          (data, byte) => data + String.fromCharCode(byte), ''
        )
      );
1
2
3
4
5
6
7

将ArrayBuffer转换为base64就可以提供img标签的src进行显示了
window.btoa方法可以将一个二进制字符串（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串。

2.根据图片的url转为blob会formdata对象

1. 下载图片

const state = reactive({
  imgFormDatas: new FormData(),
});
const downloadImg = url => {
  let image = new Image();
  image.crossOrigin = '';
  image.src = url;
  image.onload = function () {
    state.imgFormDatas = base64ToFormData(getBase64Image(image));
  };
  image.onerror = function () {
    Toast.text('图片加载错误');
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 通过image对象生成base64字符串

const getBase64Image = img => {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
  var dataURL = canvas.toDataURL('image/' + ext); 
  return dataURL;
};`
1
2
3
4
5
6
7
8
9
10

3. 将base64字符串转换为formdata对象

const base64ToFormData = (base64String) => {
  // console.log(base64String, 'base64String');
  //这里对base64串进行操作，去掉url头，并转换为byte
  let imgFormDatas = new FormData();
  let bytes = window.atob(base64String.split(',')[1]);
  let array = [];
  for (let i = 0; i < bytes.length; i++) {
    array.push(bytes.charCodeAt(i));
  }
  let blob = new Blob([new Uint8Array(array)], { type: 'image/jpeg' });
  imgFormDatas.append('file', blob, Date.now() + '.jpg');
  return imgFormDatas;
};
1
2
3
4
5
6
7
8
9
10
11
12
13

主要使用的方法：
window.btoa
window.atob
new Blob
new FormData()