首页 > 特效插件 > 表单按钮 >  vue3分片上传+批量上传+断点续传插件hxz-chunk-upload正文

vue3分片上传+批量上传+断点续传插件hxz-chunk-upload

特效介绍

hxz-chunk-upload


vue3分片上传插件,支持单文件上传,多文件上传;当为多文件时,会批量进行上传;显示文件列表,显示每个文件的上传进度;支持因暂停上传或网络问题导致的上传中断的断点续传。

上传完成后,点击确定按钮,会将所有上传文件的上传信息emit到外部。


使用方法

安装

1// 安装element-plus,如果已安装,忽略
2npm install element-plus --save
3// 安装  spark-md5
4npm install --save spark-md5
5// 安装本插件
6npm install hxz-chunk-upload --save


全局使用element-plus

1import ElementPlus from 'element-plus'
2import 'element-plus/dist/index.css'
3app.use(ElementPlus)


使用本插件

/

1/ 引入本插件
2import { hxzChunkUpload } from "hxz-chunk-upload"
3// 在components中加入本插件
4components: {hxzChunkUpload},
5// 在template中加入本插件
6<hxz-chunk-upload />


参数

参数名默认值类型解释
action''String上传接口地址
appedDatanullObject上传接口额外参数
folderName''String目录名
headersnullObjectheader携带参数
maxSize1000Number单个文件最大尺寸(MB)
shardSize1000Number分片大小(KB)
height150Number拖拽区域的高度
tableHeight'500px'String文件列表的表格高度
multipletrueBoolean是否多文件上传
accept'*'String文件类型
name'file'String上传的文件字段名
disabledfalseBoolean是否禁用


上传接口参数

参数名类型解释
folderNameString目录名
fileDatabinary分片二进制数据
fileNameString文件名
file_sizeNumber文件大小(字节)
file_chunksizeNumber分片大小(字节)
file_suffixString后缀名
fileTotalNumber总分片数
fileMd5String文件MD5,凭借这个合并文件
fileIndexNumber1--非最后一个分片 2--最后一个分片


上传接口应按照如下返回

01{
02    "status": 200,
03    "message""success",
04    "data": {
05        "id"""// 文件ID,当合并分片后,返回
06        "message"""// 提示信息
07        "url"""// 文件url,当合并分片后,返回
08        "file_index": 1, // 分片索引
09        "status": 1 // 1--非最后一个分片,2--最后一个分片(合并分片后返回2)
10    }
11}


事件

事件名事件参数参数类型解释
closeUploadnull
取消按钮的点击事件
confirmUploaduploadedInfoListarray确定按钮的点击事件,参数格式:[{"id": "", "url": "", "file_index": 10, "status": 2 }]


使用示例

01<template>
02  <hxz-chunk-upload
03    ref="hxz-chunk-upload"
04    action="/api/tool/oss/upload3"
05    @confirmUpload="confirmUpload"
06  />
07  <!-- :multiple="false" -->
08</template>
09<script>
10import { hxzChunkUpload } from "hxz-chunk-upload"
11import 'hxz-chunk-upload/dist/yxChunkNext.css'
12export default {
13  name: 'App',
14  components: {hxzChunkUpload},
15  data () {
16    return {
17    }
18  },
19  methods: {
20    confirmUpload(info) {
21      console.log(info)
22    }
23  },
24  mounted() {
25  }
26}
27</script>
28<style>
29body,html{
30  margin: 0;
31  padding: 0;
32  box-sizing: border-box;
33}
34body{
35  padding: 30px;
36}
37</style>