将base64图片以FormData格式上传到服务器(个人笔记)

1. 将base64格式的图片处理为Blob对象。

// base64 转为Blob
function base64ToBlob(base64Data) {
  const dataArr = base64Data.split(','); // 根据,来分隔
  // 获取文件类型。使用正则捕获 image/jpeg
  const imageType = dataArr[0].match(/:(.*?);/)[1]; 
  // 使用atob() 将base64 转为文本文件
  const textData = window.atob(dataArr[1]); 
  // 创建一个二进制数据缓冲区，可以理解为一个数组
  const arrayBuffer = new ArrayBuffer(textData.length); 
  // 创建一个类型化数组对象，可以理解为上面的数组的成员，给这个对象赋值就会放到上面的数组中。
  const uint8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < textData.length; i++) {
    uint8Array[i] = textData.charCodeAt(i); // 将文本文件转为UTF-16的ASCII, 放到类型化数组对象中
  }
  // 返回两个值，一个Blob对象，一个图片格式（如jpeg）
  return [new Blob([arrayBuffer], {type: imageType}), imageType.slice(6)]; 
}

2. 将Blob对象添加到formData对象中。

// 转为formData
function toFormData(base64Data) {
  const [imageBlob, imageType] = base64ToBlob(base64Data); // 获取处理好的Blob 和文件类型
  const formData = new FormData();
  formData.append('file', imageBlob, `${Date.now()}.${imageType}`); // 添加到表单，传入文件名
  return formData;
}

3. http请求头设置为context-type: multipart/form-data上送到文件服务器。

// 上传到照片服务器
export default function upload(base64Data) {
    const formData = toFormData(base64Data);
    return new Promise((resolve, reject) => {
        httpRequest(formData).then((res: any) => {
          resolve(res.data)
        }).catch((err) => {
            reject(err);
        });
    });
}

原文链接：https://blog.csdn.net/yuan0209/article/details/135423698