特效介绍

vue3分片上传插件,支持单文件上传,多文件上传;当为多文件时,会批量进行上传;显示文件列表,显示每个文件的上传进度;支持因暂停上传或网络问题导致的上传中断的断点续传。
上传完成后,点击确定按钮,会将所有上传文件的上传信息emit到外部。
使用方法
安装
1 | // 安装element-plus,如果已安装,忽略 |
2 | npm install element-plus --save |
4 | npm install --save spark-md5 |
6 | npm install hxz-chunk-upload --save |
全局使用element-plus
1 | import ElementPlus from 'element-plus' |
2 | import 'element-plus/dist/index.css' |
使用本插件
/
2 | import { hxzChunkUpload } from "hxz-chunk-upload" |
4 | components: {hxzChunkUpload}, |
参数
参数名 | 默认值 | 类型 | 解释 |
---|
action | '' | String | 上传接口地址 |
appedData | null | Object | 上传接口额外参数 |
folderName | '' | String | 目录名 |
headers | null | Object | header携带参数 |
maxSize | 1000 | Number | 单个文件最大尺寸(MB) |
shardSize | 1000 | Number | 分片大小(KB) |
height | 150 | Number | 拖拽区域的高度 |
tableHeight | '500px' | String | 文件列表的表格高度 |
multiple | true | Boolean | 是否多文件上传 |
accept | '*' | String | 文件类型 |
name | 'file' | String | 上传的文件字段名 |
disabled | false | Boolean | 是否禁用 |
上传接口参数
参数名 | 类型 | 解释 |
---|
folderName | String | 目录名 |
fileData | binary | 分片二进制数据 |
fileName | String | 文件名 |
file_size | Number | 文件大小(字节) |
file_chunksize | Number | 分片大小(字节) |
file_suffix | String | 后缀名 |
fileTotal | Number | 总分片数 |
fileMd5 | String | 文件MD5,凭借这个合并文件 |
fileIndex | Number | 1--非最后一个分片 2--最后一个分片 |
上传接口应按照如下返回
事件
事件名 | 事件参数 | 参数类型 | 解释 |
---|
closeUpload | null |
| 取消按钮的点击事件 |
confirmUpload | uploadedInfoList | array | 确定按钮的点击事件,参数格式:[{"id": "", "url": "", "file_index": 10, "status": 2 }] |
使用示例
03 | ref= "hxz-chunk-upload" |
04 | action= "/api/tool/oss/upload3" |
05 | @confirmUpload= "confirmUpload" |
07 | <!-- :multiple= "false" --> |
10 | import { hxzChunkUpload } from "hxz-chunk-upload" |
11 | import 'hxz-chunk-upload/dist/yxChunkNext.css' |
14 | components: {hxzChunkUpload}, |
32 | box-sizing: border-box; |