WOX-UPLOAD 是一个基于 Vue.js 和 Element-ui 的文件上传组件，使用它可以让我们在前端快速的实现文件上传功能，它不但支持文件上传、批量文件上传、图片预览等功能，并且提供了上传前、上传中、上传后的生命周期函数，相较于其他组件，WOX-UPLOAD 可以更加灵活和方便的操作和维护，让我们快速实现文件上传功能。
安装和引用 wox-upload
使用 npm 安装，通过以下命令可以安装最新版本的 wox-upload。
npm install wox-upload --save
在项目中引用，可以通过如下命令引入 wox-upload 。
import WoxUpload from 'wox-upload' components: { WoxUpload }
使用示例
关于 wox-upload 如何使用，下列是一个使用示例，其中以单文件上传为例。
-- -------------------- ---- ------- ----------- ------------ ----------------------- ------------------- ---------- --------------------- ------------------ ------------ -------------------- ----------------------------- --------------------------------- ------------------------------- ------------------------------ ---------- --------------- -- --------------------------- ---- ------------ -------------展开代码
以上示例的代码解释如下：
uploadUrl：上传文件的 URL 地址；actionUrl：上传前的处理；limit：文件数量限制，默认为 1；fileList：文件列表；headers：头部信息；data：上传前的附带信息；is-draggable：是否启用拖拽上传功能；@before-upload：文件上传前触发的事件，可以在这里做上传前的操作；@upload-progress：文件上传中触发的事件，可以在这里做上传进度的操作；@upload-success：文件上传成功触发的事件，可以做上传成功的操作；@upload-failed：文件上传失败触发的事件，可以做上传失败的操作。
生命周期函数
关于 wox-upload 可以使用的生命周期函数，下列是生命周期函数和相应的参数。
before-upload(file)：在上传前触发；upload-progress(event, file)：文件上传中触发；upload-success(response, file)：文件上传成功后触发，response为上传成功后的返回值，file为当前上传的文件；upload-failed(error, response)：文件上传失败后触发。
总结
WOX-UPLOAD 是一个方便且易于使用的文件上传组件，同时也提供了丰富的生命周期函数，方便我们随时对上传状态进行操作。在实际的开发中可以根据需求灵活地使用组件来实现文件上传功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671148dd3466f61ffe580
