dropzone-ui：在 React 应用中提供拖放文件上传的新方式（第 1 部分）
介绍
介绍
Dropzone UI是一套完整的 React 组件，它可以让开发者减少编写文件上传拖放区域代码的时间。
在标准的 HTML5 中，您可以通过`<input type="file"> ` 元素进行文件上传。此外，还有像dropzone和react-dropzone这样的包可以很好地处理这项任务。
然而，受后者的启发，人们创建了一个功能更强大、更新的工具：dropzone-ui。
借助这款新工具，您可以轻松显示预览，还可以限制文件类型、文件大小和文件数量。此外，您还可以更改视图模式，以水平列表或网格形式查看文件。
正如我之前所说，您可以通过点击顶部“全部移除”按钮旁边的按钮来更改视图模式：
最后一个示例很重要，因为您还可以从中看到两个出色的功能：
- 信息层
- 文件状态
信息层
该图层显示有关文件的所有相关信息，例如名称、类型和大小。
文件状态
文件根据验证标准验证后的状态。
要创建一个支持上述屏幕截图的 Dropzone，您只需要以下这段来自 CodesandBox 的代码：
import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
const [files, setFiles] = useState([]);
const [imageSrc, setImageSrc] = useState(undefined);
const updateFiles = (incommingFiles) => {
console.log("incomming files", incommingFiles);
setFiles(incommingFiles);
};
const onDelete = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
const handleSee = (imageSource) => {
setImageSrc(imageSource);
};
return (
<Dropzone
onChange={updateFiles}
value={files}
maxFiles={10}
maxFileSize={2998000}
>
{files.map((file) => (
<FileItem
{...file}
onDelete={onDelete}
onSee={handleSee}
preview
info
hd
/>
))}
</Dropzone>
);
}
全屏预览
一个杀手级功能是，结合同一软件包中的另一个名为“FullScreenPreview”的组件，您可以查看文件的全屏图像预览。
import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
const [files, setFiles] = useState([]);
const [imageSrc, setImageSrc] = useState(undefined);
const updateFiles = (incommingFiles) => {
console.log("incomming files", incommingFiles);
setFiles(incommingFiles);
};
const onDelete = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
const handleSee = (imageSource) => {
setImageSrc(imageSource);
};
return (
<Dropzone
onChange={updateFiles}
value={files}
maxFiles={10}
maxFileSize={2998000}
>
{files.map((file) => (
<FileItem
{...file}
onDelete={onDelete}
onSee={handleSee}
preview
info
hd
/>
))}
<FullScreenPreview
imgSource={imageSrc}
openImage={imageSrc}
onClose={(e) => handleSee(undefined)}
/>
</Dropzone>
);
}
这是拖放文件并点击view所需文件项上的按钮后的结果：
本土化
最后，dropzone ui 还支持西班牙语，可通过以下localization属性实现：
import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
const [files, setFiles] = useState([]);
const [imageSrc, setImageSrc] = useState(undefined);
const updateFiles = (incommingFiles) => {
console.log("incomming files", incommingFiles);
setFiles(incommingFiles);
};
const onDelete = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
const handleSee = (imageSource) => {
setImageSrc(imageSource);
};
return (
<Dropzone
onChange={updateFiles}
value={files}
maxFiles={10}
maxFileSize={2998000}
localization={"ES-es"}
>
{files.map((file) => (
<FileItem
{...file}
onDelete={onDelete}
onSee={handleSee}
localization={"ES-es"}
preview
info
hd
/>
))}
<FullScreenPreview
imgSource={imageSrc}
openImage={imageSrc}
onClose={(e) => handleSee(undefined)}
/>
</Dropzone>
);
}
结论
总之， dropzone-ui是一个非常棒的拖放文件库，支持图像预览。本文无法展现 dropzone-ui 的全部潜力，但提供了一个概览。事实上，这里的信息足以让你开始使用这个强大的工具进行开发。你可以在文档中找到更多信息：https://www.npmjs.com/package/dropzone-ui。在接下来的文章中，我将深入介绍这个库。
文章来源：https://dev.to/jinssj3/dropzone-ui-the-new-way-of-providing-drag-and-drop-file-uploads-in-react-app-5djd