vue3分片上传+批量上传+断点续传插件hxz-chunk-upload_表单按钮_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

来源：作者：woaimoban 大小：大小： 10MB 点击次数：发布时间：2023-02-13 16:18:20 去下载去预览

特效介绍

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	上传接口地址
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--最后一个分片

上传接口应按照如下返回

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}

事件

事件名	事件参数	参数类型	解释
closeUpload	null		取消按钮的点击事件
confirmUpload	uploadedInfoList	array	确定按钮的点击事件，参数格式：[{"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>