js中File与base64之间的转换

使用 FileReader 对象将 File 对象转换为 base64 编码的字符串。封装异步示例:

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    // 创建一个新的 FileReader 对象
    const reader = new FileReader();
    // 读取 File 对象
    reader.readAsDataURL(file);
    // 加载完成后
    reader.onload = function () {
      // 将读取的数据转换为 base64 编码的字符串
      const base64String = reader.result.split(",")[1];
      // 解析为 Promise 对象，并返回 base64 编码的字符串
      resolve(base64String);
    };
 
    // 加载失败时
    reader.onerror = function () {
      reject(new Error("Failed to load file"));
    };
  });
}

base64 先转换为 Blob，再由 Blob 转换为 File：

在 JavaScript 中，可以使用 Blob 对象将 base64 字符串转换为二进制数据对象 Blob。
首先，使用 atob() 函数将 base64 字符串解码为二进制字符串。然后，使用 Uint8Array 构造函数将二进制字符串转换为字节数组。最后，使用 Blob 构造函数，将字节数组作为第一个参数，创建一个新的 Blob 对象。

// 将 base64 转换为 Blob
function base64ToBlob(base64) {
  var arr = base64.split(","),
    mime = arr[0].match(/:(.\*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    type: mime,
  });
}

因需求需要在element上传组件中把webp格式的图片改成jpg格式的图片,直接写成非异步示例

filesUpload(fileList) {
      let that = this
      const file = fileList.file; // 拿到上传的图片
      //第一步
      const reader = new FileReader();// 创建FileReader对象
      reader.readAsDataURL(file); // 开始读取文件内容为Data URL格式
      reader.onloadend = function (event) { //读取完成之后
        const imgDataUrl = event.target.result; // 获取图片数据URL
        console.log("图片数据URL--base64:", imgDataUrl);
        //第二步
        // 创建Image对象并设置src属性为Base64 WebP格式的图片数据
        var img = new Image();
        img.src = imgDataUrl;
        img.onload = function () {
          var canvas = document.createElement('canvas');
          // 根据原始图像大小调整画布尺寸
          canvas.width = img.naturalWidth;
          canvas.height = img.naturalHeight;
          // 获取2D上下文
          var ctx = canvas.getContext("2d");
          // 将WebP图像绘制到画布上
          ctx.drawImage(img, 0, 0);
          // 导出为JPEG格式的DataURL
          var jpgDataUrl = canvas.toDataURL("image/jpeg", 1.0);
          // 这里可以根据需要进行操作，比如将图片显示在页面上等
          //第三步
          // 分割base64,转为file
          const arr = jpgDataUrl.split(',');
          // 获取类型
          const mime = arr[0].match(/:(.*?);/)[1];
          // 解析base字符串
          const bstr = atob(arr[1]);
          let n = bstr.length;
          // base64文件数据读取
          const u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          const file1 = new File([u8arr], 'photo', { type: mime });
          console.log('生成的文件:', file1);
          that.$emit('getInfo', file1)
          console.log(jpgDataUrl); // 输出JPEG格式的DataURL
        };
      };
    },