JavaScript中如何将blob图片转换为base64格式？

不需要基于URL.createObjectURL的返回值做二次转换，直接对原始的File对象（即event.target.files[0]）使用浏览器内置的FileReader API即可完成编码，修改后的完整代码如下：

const onImageChange = (event) => {
  if (event.target.files && event.target.files[0]) {
    const selectedFile = event.target.files[0];
    // 保留原有图片展示逻辑
    setImage(URL.createObjectURL(selectedFile));
    console.log(selectedFile);

    // 新增Base64转换逻辑
    const fileReader = new FileReader();
    fileReader.onload = (loadEvent) => {
      // loadEvent.target.result 即为转换完成的完整Base64字符串
      const convertedImageBase64 = loadEvent.target.result;
      setImageName(convertedImageBase64);
    };
    // 以DataURL格式读取文件，返回结果自动封装为Base64格式
    fileReader.readAsDataURL(selectedFile);
  }
}

注意事项 #

• 转换得到的Base64默认携带data:image/[格式];base64,前缀，如果后端要求仅传递纯编码内容，可通过以下方式截取：

  const pureBase64 = convertedImageBase64.split(',')[1]
  

• FileReader的读取为异步操作，必须在onload回调内才能拿到转换结果，不要尝试在回调外直接读取Base64值，会得到undefined
• 如果需要限制上传图片大小，可在转换前通过selectedFile.size判断，单位为字节，超过阈值可直接抛出用户提示，无需执行后续转换逻辑

内容的提问来源于stack exchange，提问作者Gigi Carti