一次上传一张带有预览问题的图片-React Drop区域

问题描述

  const [files,setFiles] = useState([]);

  const onDrop = useCallback((acceptedFiles) => {
    // Do something with the files
    setFiles(
      acceptedFiles.map((file: File) =>
        Object.assign(file,{
          preview: URL.createObjectURL(file),})
      )
    );
  },[]);
  const { getRootProps,getInputProps } = useDropzone({
    onDrop,accept: 'image/*',multiple: false,});


  const thumbs = files.map((file: { [key: string]: string }) => (
    <div className={classes.imagePreview} key={file.name}>
      <img className={classes.image} src={file.preview} alt={file.name} />
    </div>
  ));

  useEffect(() => {
    // Make sure to revoke the data uris to avoid memory leaks
    files.forEach((file: { [key: string]: string }) =>
      URL.revokeObjectURL(file.preview)
    );
  },[files]);

我的HTML

 <div className={classes.imageContainer}>
          {thumbs}
          <div className={classes.borderBox} {...getRootProps()}>
            <input {...getInputProps()} />
            <div>
              <AddIcon />
            </div>
          </div>
        </div>

我尝试一次通过dropzone上传，但是我的图片被替换为第二张。

解决方法

修复了该错误，并附加了状态

  const onDrop = useCallback(
    (acceptedFiles) => {
      // Process files
      const oneFile = get(acceptedFiles,'[0]',[]);
      Object.assign(oneFile,{ preview: URL.createObjectURL(oneFile) });
      setFiles([oneFile,...files]);
    },[files]
  );