Javascript 如何使用react dropzone预览图像

我希望用户从他们的计算机“上传”一个文件，将其存储在浏览器中（我猜），并显示图像，而无需将其发送到服务器。 基本上，我希望这种情况发生（网站上的示例）：

它本身就可以工作，但我使用的是react dropzone，它不工作

我的代码：

import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import styles from "./dropzone.module.css";
import ImageZone from "../imagezone";

export default function Dropzone() {
  const [path, setPath] = useState("");
  const openFile = () => {
    const reader = new FileReader();
    reader.onload = () => {
      const dataURL = reader.result;
      setPath(dataURL);
    };
  };
  const onDrop = useCallback(acceptedFiles => {
    openFile();
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div className={styles.mycontainer}>
      <div className={styles.dropzone} {...getRootProps()}>
        <input {...getInputProps()} />
        {isDragActive ? (
          <p>Drop the files here ...</p>
        ) : (
          <p>Drag 'n' drop some files here, or click to select files</p>
        )}
      </div>
      <ImageZone src={path}></ImageZone>
    </div>
  );
}

import React，{useCallback，useState}来自“React”；
从“react dropzone”导入{useDropzone}；
从“/dropzone.module.css”导入样式；
从“./ImageZone”导入ImageZone；
导出默认函数Dropzone（）{
const[path，setPath]=useState（“”）；
常量openFile=（）=>{
const reader=new FileReader（）；
reader.onload=（）=>{
const dataURL=reader.result；
setPath（dataURL）；
};
};
const onDrop=useCallback（acceptedFiles=>{
openFile（）；
}, []);
const{getRootProps，getInputProps，isDragActive}=useDropzone（{onDrop}）；
返回(
{isDragActive(
把文件放在这里

) : (
将一些文件拖放到此处，或单击以选择文件

)}
);
}

您可以使用文件读取器api读取拖放文件的内容，然后显示它。您需要修复

onload

回调

const onDrop=useCallback（acceptedFiles=>{
const reader=new FileReader（）；
reader.onload=e=>{
const dataURL=e.target.result；
setPath（dataURL）；
};
acceptedFiles.forEach（文件=>reader.readAsArrayBuffer（文件））
}, []);

你用

在浏览器中存储它是什么意思？

？我真的不知道，这可能不是我想要的。我只想让用户看到他们上传的图片，而不需要将其发送到服务器。只需在浏览器中。只需在您的

openFile

函数中预览拖放到DZ中的图像即可。您正在创建一个文件读取器，并设置它在完成读取后的功能。。。但是，您实际上在哪里为它提供要读取的文件并调用函数开始读取？您的

setPath

函数是什么样子的？