前言

在 Web 开发过程中，图片上传是一个非常常见的功能。然而，对于多图像上传，许多前端开发者都遇到过各种烦人的问题。比如，上传大量图像的较慢速度，过去加载图像时的卡顿以及在处理缩略图和水印等操作时的麻烦。

幸运的是，我们可以使用 npm 上的一个多图像上传器来简化整个过程，使它快速并轻松地运行。

介绍

npm 上有许多多图像上传器，但我们今天将介绍使用 react-dropzone，一个非常流行和强大的库。

react-dropzone

react-dropzone 是一个用于上传文件的 React 组件。它使网络应用程序使用 HTML 5 拖放功能变得很容易，同时还能保留传统的文件上传方式。另外，它还提供了良好的定制性和文档说明，对需要修改或自定义上传流程的Web应用程序非常有用。此外，它还提供了其他功能，例如：

• 可预览文件
• 禁用文件类型
• 自定义样式

如何使用 react-dropzone

npm install react-dropzone 安装 react-dropzone 库后，我们可以使下面的组件来上传文件:

import React from "react";
import Dropzone from "react-dropzone";

function MyUploader() {
  const onDrop = (acceptedFiles) => {
    console.log(acceptedFiles);
  };

  return (
    <Dropzone onDrop={onDrop}>
      {({ getRootProps, getInputProps }) => (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>拖放（Drag and drop）图片至此，或点击来选取图片 （Click or drop image files）</p>
        </div>
      )}
    </Dropzone>
  );
}

在上面的代码中，我们将文件上传的逻辑放在 onDrop 函数中。在这种情况下，我们仅将接受的文件打印到控制台。公共组件如下所示：

import React from "react";
import Dropzone from "react-dropzone";

function MyUploader({ onDrop }) {
  return (
    <Dropzone onDrop={onDrop}>
      {({ getRootProps, getInputProps }) => (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>拖放（Drag and drop）图片至此，或点击来选取图片 （Click or drop image files）</p>
        </div>
      )}
    </Dropzone>
  );
}

在上面的代码中，MyUploader 接受一个 onDrop 属性，该属性定义了用户将拖放的文件放入 Dropzone 区域时将要执行的操作。

结论

通过 react-dropzone，实现多图像上传已经不再是一个难点。不只是文件上传功能，它还提供了各种选项，并易于定制。下一次你的项目需要实现多图像上传时，请优先考虑 react-dropzone。