前言
在前端开发过程中，图片上传是一个常见需求，在以往的实现方式中，最常用的是利用 input 标签进行文件选择，再通过 ajax 或 form 表单提交实现上传。但是这种实现方案存在一定的不便，比如说需要制作样式、拍摄一个短视频教用户如何上传等问题，而这一切都可以通过 npm 包 images-drop-area-component 来解决。
images-drop-area-component 是一个可爱的可以拖拽上传图片的 React 组件，这个组件支持拖拽区域的自定义，同时还提供了文件预览和上传成功后的回调函数等功能。
下面我们将详细介绍 images-drop-area-component 的使用方法。
安装
npm 安装：
npm install images-drop-area-component
或者使用 yarn 安装：
yarn add images-drop-area-component
使用
如果你使用的是 React，那么你可以直接在你的组件中引入 images-drop-area-component：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------------- ---- -----------------------------
-------- ------------- -
----- ------------- - ------- -- -
------------------- -- ---------
--
------ -
------------------------
-------------------------
------------------------
--------------
------------- - ---- - --
--
--
-上面的代码中我们引入了 images-drop-area-component，并且在组件中使用了它。同时我们还传入了一些选项，包括 onSuccess（上传成功后的回调函数）、accept（接受的文件类型）、preview（是否需要预览）、maxSize（文件最大限制大小）等属性。
当用户拖拽一个或多个图片到了这个拖拽区域后，图片会自动上传到后端地址，而前端则会接收到一个包含上传成功图片信息的数组。
[{
uuid: "",
name: "",
url: "",
}]如果你想自定义拖拽区域的样式，那么你可以通过 CSS 来实现。请查看 images-drop-area-component 的文档中要使用的类名。
示例代码
下面我们来看一个完整的示例代码，详细介绍了 images-drop-area-component 的使用方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------------- ---- -----------------------------
------ ------------
-------- ----- -
----- ------------- - ------- -- -
-------------------
--
------ -
---- ----------------
------------------------
-------------------------
------------------------
--------------
------------- - ---- - --
--
------
--
-
------ ------- ------ -------------------- ---- ------- ---- - ------ ---- ------- - ----- ------- --- ------ ----- -------------- ----- -------- ----- ----------- ------- - ---------- - --------- --------- -------- ----- ---------------- ------- ------------ ------- ------ ------ ------- ------ ------- ---- ----- ------- --- ------ ---------- - -------------------- - ------------- ----- - ---------- -------- - --------- --------- ---- -- ----- -- ------- -- ------ -- ------------------ ---------- -------------------- ------ ------- ---------------- ------ -
结语
如果你正在开发一个需要图片上传功能的 Web 应用，那么 images-drop-area-component 将是你不错的选择。它拥有多种选项，开发者可以自由地进行设置，使用起来相当地便捷！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a25