我最终使用了一个返回Promise的函数。

const getImg64 = async() => { const convertImgToBase64URL = (url) => { console.log(url) return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = () => { let canvas = document.createElement('CANVAS') const ctx = canvas.getContext('2d') canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); const dataURL = canvas.toDataURL(); canvas = null; resolve(dataURL) } img.src = url; }) } //for the demonstration purposes I used proxy server to avoid cross origin error const proxyUrl = 'https://cors-anywhere.herokuapp.com/' const image = await convertImgToBase64URL(proxyUrl+'https://image.shutterstock.com/image-vector/vector-line-icon-hello-wave-260nw-1521867944.jpg') console.log(image) } getImg64()

你可以在任何异步函数中使用这种方法。然后，您只需等待转换后的图像并继续执行指示即可。

这很简单。 只需调用函数并传递你的图像。 2>保存返回值并在任何需要的地方使用。

//call like this
const convertedFile = await imageToBase64(fileObj);
console.log("convertedFile",convertedFile);

//this is the required function

 async function  imageToBase64(image) {
 const reader = new FileReader();
 reader.readAsDataURL(image);
 const data= await new Promise((resolve, reject) => {

   reader.onload = () => resolve(reader.result);

   reader.onerror = error => reject(error);

  });
return data;
}

export default imageToBase64;

以下是我所做的:

// 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)
})

需要利用读取器将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)

如果您遇到cors源错误，有一个简单的代理，称为cors-fix，它在服务器上加载图像并将其作为缓冲区数组返回。

因此，我们可以使用fetch来获取图像数据，并使用filereader将其转换为dataUrl，如@HaNdTriX所述。

  function toDataUrl(url) {
    fetch(`https://cors-fix.web.app/v1?url=${url}`)
    .then(data => data.blob().then(blob => {
      const reader = new FileReader();

      reader.onloadend = () =>  {
        console.log(reader.result);
      };

      reader.onerror = () => {
        console.log('reader error');
      };

      reader.readAsDataURL(blob);
    }));
  }

假设您在浏览器中执行此操作:

等待:

import axios from 'axios'

const response = await axios.get(url, { responseType: 'blob' });
return window.URL.createObjectURL(response.data);

与承诺

import axios from 'axios'

const response = await axios.get(url, { responseType: 'blob' })
  .then((response) => {
    const dataUrl = window.URL.createObjectURL(response.data);
    // do something with your url
  });