使用反应图像文件调整器反应 dropzone 不起作用

问题描述

我正在使用 react dropzone 和 react image file resizer 在图像下拉时上传多个调整大小的图像。
在没有反应图像文件调整器的情况下，React Dropzone 工作正常（上传、显示缩略图）。
但是将两个模块组合在一起，当图像下降时，它会很好地调整大小，但不知何故不会更新状态。
好像是使用 async,await 方式不对造成的，
因为在 finally 子句中的 console.log 比在 try - await 子句中的 console.log 先出现。
这是有问题的代码。

这是反应图像文件调整器代码：

  const resizefile = (file) =>
    new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,300,"JPEG",80,(uri) => {
          resolve(uri);
        },"file"
      );
    });

这是 react dropzone 中的 onDrop 方法：

/// onDrop method in react dropzone
  const onDrop = async (images) => {
    let uploadBranchImages = [];
    try {
      await images.map((image) => {
        resizefile(image).then((resizedImage) => {
          console.log(resizedImage);
          Object.assign(resizedImage,{
            preview: URL.createObjectURL(resizedImage),});
          uploadBranchImages.push(resizedImage);
        });
      });
    } catch (err) {
      console.log(err);
    } finally {
      console.log(uploadBranchImages);
      let tempBranchImages = [...state.branchImages,...uploadBranchImages];
      console.log(tempBranchImages);

      setState({
        ...state,branchImages: tempBranchImages,});
    }
  };

在这段代码中，首先出现的是finally子句中uploadBranch的日志，然后是tempBranchImages的日志，最后是try子句中resizedImage的日志。
另外，当我在 Chrome 地址栏中输入 URL 时，调整大小的图像显示良好。

这是日志的捕获： capture_of_logs

所以问题是……为什么这些代码不能按顺序工作？
因此，上传后图片不会显示在拖放区中。

有关更多信息，我将在没有反应图像文件调整器的情况下附加日志。 它与上述数组预览中的捕获不同

( [ ] vs [文件] )

这是日志： capture_of_logs_without_resize

任何建议将不胜感激..

解决方法

非常感谢您的回答，这正是我要找的。如果有人想使用钩子 useDropzone():

const {getRootProps,getInputProps,isDragActive,isDragAccept,isDragReject} = useDropzone({
        accept: "image/*",maxFiles: 1,onDrop: async (acceptedFiles: any) => {
            await Promise.all(
                acceptedFiles.map((image: any) => {
                    return resizeFile(image);
                })
            ).then((uploadBranchImages) => {
                console.log('Upload Branch Images',uploadBranchImages);
                setImages(
                    uploadBranchImages
                        .map((image: any) => {
                                const imageModified = Object.assign(image,{
                                    preview: URL.createObjectURL(image)
                                })

                                handleFireBaseUpload(imageModified);
                                return imageModified;
                            }
                        )
                );

            })
        }
    });

,

找到答案...
问题来自于 map 的 promise。
地图没有等待之前的承诺，
所以我用 Promise.all() 来等待所有的 promise。
解决所有承诺后，我用结果更新了状态
而且效果很好..
希望有人知道我的情况！

这是代码...

  const resizeFile = (file) =>
    new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,300,"JPEG",80,(image) => {
          Object.assign(image,{
            preview: URL.createObjectURL(image),path: image.name,});
          resolve(image);
        },"file"
      );
    });

  /**
   * dropdown 모듈을 사용한 이미지 업로드
   */
  const onDrop = async (images) => {
    await Promise.all(
      images.map((image) => {
        return resizeFile(image);
      })
    ).then((uploadBranchImages) => {
      let tempBranchImages = [...state.branchImages,...uploadBranchImages];
      console.log(tempBranchImages);

      setState({
        ...state,branchImages: uploadBranchImages,});
    });
  };