使用dropzone-ui上传文件时图片预览不显示该如何解决？

问题原因 #

• 你当前配置的maxFileSize参数为40000，仅允许最大40KB的文件上传，若拖入的图片超出该大小会被标记为无效文件，无法生成预览。
• FileItem组件未开启预览配置，默认仅展示通用文件图标，不会渲染图片缩略图。

修复方案 #

调整maxFileSize到符合需求的大小，同时给FileItem添加preview属性开启图片预览，修复后代码如下：

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";

export default function MyDropzone() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);

  const updateFiles = (incomingFiles) => {
    console.log("incoming files", incomingFiles);
    setFiles(incomingFiles);
  };

  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };

  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      // 示例调整为最大支持5MB文件，可根据实际需求修改
      maxFileSize={5 * 1024 * 1024}
      label="Drag'n drop your files here or click to browse"
      accept="image/*"
      fakeUploading
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          info
          // 新增preview属性开启图片缩略图预览
          preview
        />
      ))}
    </Dropzone>
  );
}

修改后重新运行即可正常显示图片类文件的缩略图预览。

内容的提问来源于stack exchange，提问作者Ginni Tsukino