用反应图像文件大小调整器反应 dropzone 不起作用答案

【问题标题】：react dropzone with react image file resizer doesn't work用反应图像文件大小调整器反应 dropzone 不起作用
【发布时间】：2021-08-31 23:26:07
【问题描述】：

我正在与react dropzone 和react image file resizer 合作，以便在图片下拉时上传多张调整大小的图片。
React Dropzone 可以正常工作（上传、显示缩略图），无需 React 图像文件调整器。
但是将两个模块组合在一起，当图像下降时，它会很好地调整大小，但不知何故不会更新状态。
这似乎是由于使用了异步，以错误的方式等待，
因为 finally 子句中的 console.log 比 try - await 子句中的 console.log 先出现。
这是有问题的代码。

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

  const resizeFile = (file) =>
    new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        300,
        300,
        "JPEG",
        80,
        0,
        (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的日志最后出现。
另外，当我将 URL 放在 chrome 地址栏中时，调整大小的图像显示效果很好。

这里是日志的捕获： capture_of_logs

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

如需更多信息，我将附上不带反应图像文件大小调整器的日志。它与上面的数组预览中的捕获不同

( [ ] 与 [文件] )

这里是日志： capture_of_logs_without_resize

任何建议将不胜感激..

【问题讨论】：

标签： javascript reactjs async-await image-resizing react-dropzone

【解决方案1】：

非常感谢您的回答，这正是我想要的。如果有人想使用钩子 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;
                            }
                        )
                );

            })
        }
    });

【讨论】：

很高兴你能得到帮助！！感谢您提供更多信息。

【解决方案2】：

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

这里是代码...

  const resizeFile = (file) =>
    new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        300,
        300,
        "JPEG",
        80,
        0,
        (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,
      });
    });
  };

【讨论】：