javascript - 如何让代码在下面的 async/await 函数中等待？

Question

我想在将图像上传到服务器之前调整图像大小(使用 Firebase):

api.uploadPhoto = async (file = {}, field = {}) => {
  const canvas = document.getElementById('canvas')
  const img = document.createElement('img')
  const reader = new FileReader()
  let fileToUpload

  reader.onload = function (e) {
    img.src = e.target.result
    pica.resize(img, canvas).then(result => {
      fileToUpload = pica.toBlob(result, 'image/jpeg', 90))
    })
  }
  reader.readAsDataURL(file)

  // run the code below only when reader.onload has finished 

  return await imageUpload.toFirebase(fileToUpload, field)
}

问题是 imageUpload.toFirebase 在 reader.onload 之前运行。如何解决这个问题？

Answer 1

将上传移至回调...

api.uploadPhoto = async (file = {}, field = {}, callback) => {
  const canvas = document.getElementById('canvas');
  const img = document.createElement('img');
  const reader = new FileReader();
  let fileToUpload;

  reader.onload = function (e) {
    img.src = e.target.result;
    pica.resize(img, canvas).then(result => {
      fileToUpload = pica.toBlob(result, 'image/jpeg', 90));
    });

    reader.readAsDataURL(file);
    callback(await imageUpload.toFirebase(fileToUpload, field));

  }
};