介绍
@miasta/vue-file-tray 是一个基于 Vue.js 的文件上传组件，支持拖放上传、选择文件上传、进度条显示、上传成功/失败状态提示等功能，可以快速方便地进行文件上传。
安装
可以通过 npm 进行安装：
npm install @miasta/vue-file-tray
使用
在 Vue 组件中引入 @miasta/vue-file-tray：
import VueFileTray from '@miasta/vue-file-tray'
注册组件：
export default {
components: {
VueFileTray
}
//...
}使用组件：
<vue-file-tray v-model="fileList" :max-size="10" :max-count="5"></vue-file-tray>
其中，v-model 绑定文件列表数据，max-size 限制文件大小，max-count 限制文件数量。
组件还提供了以下参数：
- accept：允许上传的文件类型，可以为字符串数组或字符串，如：'image/*'、['image/png', 'image/jpg']
- action：文件上传地址
- headers: HTTP 请求头部信息
- data: HTTP 请求其他数据
- name: 上传的文件字段名
- withCredentials: 布尔值，表示是否携带跨域 cookies
事件
组件提供了以下事件：
add：添加文件时触发，参数为当前添加的文件列表delete：删除文件时触发，参数为当前删除的文件索引success：上传成功时触发，参数为上传成功的文件信息，包括文件名、文件地址、文件大小等error：上传失败时触发，参数为上传失败的文件信息和错误信息
可以通过以下方式监听事件：
<vue-file-tray v-model="fileList" @add="onAdd" @delete="onDelete" @success="onSuccess" @error="onError"></vue-file-tray>
示例
-- -------------------- ---- -------
----------
-----
-------------- ------------------ -------------- -------------- ---------------- -------------------
-------------------- ---------------------------------
------- ----------------------------------
------
-----------
--------
------ ----------- ---- -----------------------
------ ------- -
----------- -
-----------
--
------ -
------ -
--------- ---
---------- ------------------------------
-
--
-------- -
--------------- -
------------------------- -----
--
------------- --------- -
------------------------- ----- --------- ---------
--
------------- -
----- -------- - --- ----------
-------------------------- -- -
----------------------- ---------
--
-- ------
--------------------- -
------- -------
----- --------
----------- -- -
-------------------- ----
--
-
-
-
---------总结
@miasta/vue-file-tray 是一个实用的 Vue 文件上传组件，支持多种文件上传方式、文件类型限制以及各类 HTTP 请求参数配置，可以较为方便地进行文件上传。使用时注意配置参数并监听相关事件，对于需要自定义上传方式的场景，也可以通过手动上传方式进行文件上传。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642281e8991b448e14fb