您可以使用FileAPI，但它几乎不受支持。

你也可以简单地提取以64为基数的URL的一部分:

var Base64URL = canvas.toDataURL('image/webp')
var Base64 = Base64URL.split(",")[1] //Returns the base64 part

需要利用读取器将blob转换为base64，更喜欢使用async-await语法，所以我选择提取读取器逻辑到帮助器，像这样:

//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

并在主代码中使用await调用它:

//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)

你可以使用HTML5 <canvas>:

创建一个画布，将图像加载到其中，然后使用toDataURL()来获得Base64表示(实际上，它是一个data: URL，但它包含Base64编码的图像)。

据我所知，图像可以通过FileReader()转换为Base64字符串，也可以将其存储在canvas元素中，然后使用toDataURL()获取图像。我也遇到过类似的问题你可以参考这个。

将图像转换为已经加载的画布

以下是我所做的:

// Author James Harrington 2014
function base64(file, callback){
  var coolFile = {};
  function readerOnload(e){
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile)
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

下面是你如何使用它

base64( $('input[type="file"]'), function(data){
  console.log(data.base64)
})