前言
Kendo UI 是一款非常流行的前端框架，而它的 React 版本也已经发布了。其中一个非常实用的组件是 droptargetarea，它能够帮助我们实现文件或者图片的上传。本文将会介绍如何在 React 中使用 kendo-ui-react-jquery-droptargetarea 这个 npm 包。
安装
在开始使用之前，我们需要先安装该 npm 包。在命令行中输入以下命令即可进行安装：
npm install kendo-ui-react-jquery-droptargetarea
引入和使用
安装完成后，我们需要引入该模块并使用它。在 React 代码中，可以采用以下方式将该模块引入：
import { DropTargetArea } from "@progress/kendo-react-upload";
import "@progress/kendo-theme-default/dist/all.css";我们需要引入 DropTargetArea 和 kendo 的默认主题。接下来就可以在代码中使用该组件了。下面是一个基本的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- -------------------------------
------ ---------------------------------------------
----- --- - -- -- -
------ -
---------------
---------------------------------------------------------------------
-------------------------------------------------------------------------
--
--
--
------ ------- ----这段代码中，我们将该组件渲染到页面中，并配置了 saveUrl 和 removeUrl 这两个关键属性。它们指定了上传文件的服务器地址和删除文件的服务器地址。现在我们执行 npm run start 命令，在浏览器中打开该页面，就可以看到一个可以上传文件的组件了。
高级用法
除了基本用法之外，该组件还有一些高级的用法。下面将分别进行介绍。
文件上传成功后的回调函数
在上传文件成功之后，我们可以在组件中访问到服务器返回的数据。如果我们需要在上传成功之后执行一些操作，就可以通过设置 onComplete 回调函数来实现：
onComplete = ({ uploadedFiles }) => {
console.log(uploadedFiles);
};
<DropTargetArea
saveUrl={"https://demos.telerik.com/kendo-ui/service-v4/upload/save"}
removeUrl={"https://demos.telerik.com/kendo-ui/service-v4/upload/remove"}
onComplete={this.onComplete}
/>支持多文件上传
如果我们需要支持多个文件同时上传，可以通过设置多个属性来实现：
<DropTargetArea
saveUrl={"https://demos.telerik.com/kendo-ui/service-v4/upload/save"}
removeUrl={"https://demos.telerik.com/kendo-ui/service-v4/upload/remove"}
multiple={true}
batch={false}
defaultFiles={[{name: "UploadMe.doc"}, {name: "UploadMe.pdf"}]}
/>其中，
- multiple 属性设置为 true，允许选择多个文件；
- batch 属性设置为 false，禁用文件分批上传；
- defaultFiles 属性设置为一个数组，用于指定默认上传的文件列表。
验证上传文件的类型和大小
如果我们需要限制上传文件的类型和大小，可以设置 validation 属性。在 validation 中，我们可以指定文件大小以及文件的类型。下面是一个示例：
<DropTargetArea
saveUrl={"https://demos.telerik.com/kendo-ui/service-v4/upload/save"}
removeUrl={"https://demos.telerik.com/kendo-ui/service-v4/upload/remove"}
validation={{ allowedExtensions: [".jpg", ".jpeg"], maxFileSize: 10485760 }}
/>在这个示例中，我们限制上传文件的类型为 .jpg 或 .jpeg，同时限制文件大小为 10MB。
总结
在本文中，我们介绍了如何在 React 中使用 kendo-ui-react-jquery-droptargetarea 这个 npm 包。我们了解了该组件的基本用法以及一些高级用法，如上传成功后的回调函数、支持多文件上传、验证上传文件的类型和大小等。希望这篇文章能够帮助你更好地使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efb4c49986ca68d88fa