Javascript 使用画布缩放图像并等待结果

我正在使用上传文件

<Dropzone
  accept="image/jpeg"
  multiple
  onDrop={(acceptedFiles, rejectedFiles) => this.onDrop(acceptedFiles, rejectedFiles)}
/>

---

然后，我构造的

requestParams

对象将被发送到服务器。我的问题是，我希望客户端代码等待它遍历所有图像并构造最终的

requestParams

对象。现在不是这样。如何使上述代码等待？

可以通过以下方式实现：

async constructRequestParams(acceptedFiles: Array<Object>) {
  return new Promise((resolve) => {
    const requestParams = {
      parameters: {
        generateContourImages: false,
      },
      images: [],
    };
    acceptedFiles.forEach(async (acceptedFile, index) => {
      const { width, height } = await browserImageSize(acceptedFile);
      const imagedata = await this.scaleImage(acceptedFile, width, height);
      requestParams.images.push({
        imagedata,
        methods: methods,
        imageID: uuidv4(),
      });
      if (requestParams.images.length === acceptedFiles.length) {
        resolve(requestParams);
      }
    });
  })
}

async onDrop(acceptedFiles: Array<Object>, rejectedFiles: Array<Object>) {
  if (acceptedFiles.length) {
    const requestParams = await this.constructRequestParams(acceptedFiles);
  } else {
    this.setState({ error: true });
  }
}

异步constructRequestParams（acceptedFiles:Array）{
返回新承诺（（解决）=>{
常量requestParams={
参数：{
GenerateTourimages:false，
},
图像：[]，
};
forEach（异步（acceptedFile，index）=>{
const{width，height}=等待浏览图像大小（acceptedFile）；
const imagedata=wait this.scaleImage（acceptedFile，width，height）；
requestParams.images.push({
图像数据，
方法:方法,，
imageID:uuidv4（），
});
if（requestParams.images.length==acceptedFiles.length）{
解决（请求参数）；
}
});
})
}
异步onDrop（acceptedFiles:Array，rejectedFiles:Array）{
if（acceptedFiles.length）{
const requestParams=wait this.constructRequestParams（acceptedFiles）；
}否则{
this.setState（{error:true}）；
}
}

async scaleImage(fileImage: Object, originalWidth: number, originalHeight: number) {

  return new Promise((resolve) => {

    const imageURL = URL.createObjectURL(fileImage);

    const image = new Image();

    image.onload = () => {
      const scaleFactor = Math.max(originalWidth, originalHeight) / 1000;

      const canvas = document.createElement('canvas');
      canvas.width = originalWidth;
      canvas.height = originalHeight;

      const scaledWidth = Math.floor(originalWidth / scaleFactor);
      const scaledHeight = Math.floor(originalHeight / scaleFactor);

      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight);

      const base64 = canvas.toDataURL('image/jpeg');
      resolve(base64.substr(23));
    }

    image.src = imageURL;

  });
}

async constructRequestParams(acceptedFiles: Array<Object>) {
  return new Promise((resolve) => {
    const requestParams = {
      parameters: {
        generateContourImages: false,
      },
      images: [],
    };
    acceptedFiles.forEach(async (acceptedFile, index) => {
      const { width, height } = await browserImageSize(acceptedFile);
      const imagedata = await this.scaleImage(acceptedFile, width, height);
      requestParams.images.push({
        imagedata,
        methods: methods,
        imageID: uuidv4(),
      });
      if (requestParams.images.length === acceptedFiles.length) {
        resolve(requestParams);
      }
    });
  })
}

async onDrop(acceptedFiles: Array<Object>, rejectedFiles: Array<Object>) {
  if (acceptedFiles.length) {
    const requestParams = await this.constructRequestParams(acceptedFiles);
  } else {
    this.setState({ error: true });
  }
}