hxz-chunk-upload

vue3分片上传插件，支持单文件上传，多文件上传；支持拖拽文件或文件夹；显示文件列表，显示每个文件的上传进度；支持因暂停上传或网络问题导致的上传中断的断点续传。 上传完成后，点击确定按钮，会将所有上传文件的上传信息emit到外部。 接口如果通过比对文件的md5，检测到文件已经上传，直接status返回2，即可实现秒传功能。

打包发布

npm run build
npm publish

安装

// 安装element-plus，如果已安装，忽略
npm install element-plus --save

// 安装  spark-md5
npm install --save spark-md5

// 安装本插件
npm install hxz-chunk-upload --save

全局使用element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

局部引入本插件（建议）

// 引入本插件
import { hxzChunkUpload } from "hxz-chunk-upload"
import 'hxz-chunk-upload/dist/yxChunkNext.css'

// 在components中加入本插件
components: {hxzChunkUpload},

全局引入本插件

// 引入本插件
import { hxzChunkUpload } from "hxz-chunk-upload"
import 'hxz-chunk-upload/dist/yxChunkNext.css'

app.use(hxzChunkUpload)

使用插件

// 在template中加入本插件
<hxz-chunk-upload />

参数

参数名 | 默认值 | 类型 | 解释 :---: | :---: | :---: | :---: action | '' | String | 上传接口地址 appendData | null | Object | 上传接口额外参数，会被解析到formData里。 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 | 是否禁用 showProgressText | false | Boolean | 是否显示进度条文字 setTags | false | Boolean | 设置资源的TAGS

上传接口参数

参数名 | 类型 | 解释 :---: | :---: | :---: folderName | String | 目录名 fileData | binary | 分片二进制数据 fileName | String | 文件名 file_size | Number | 文件大小（字节） file_chunksize | Number | 分片大小（字节） file_suffix | String | 后缀名 fileTotal | Number | 总分片数 fileMd5 | String | 文件MD5，凭借这个合并文件 fileIndex | Number | 1--非最后一个分片 2--最后一个分片

上传接口应按照如下返回

{
    "status": 200,
    "message": "success",
    "data": {
        "message": "", // 提示信息
        "url": "", // 文件url，当合并分片后，返回
        "file_index": 1, // 分片索引，从1开始，数值型
        "status": 1 // 1--非最后一个分片，2--最后一个分片（合并分片后返回2），字符串型、数值型皆可
    }
}

事件

事件名 | 事件参数 | 参数类型 | 解释 :---: | :---: | :---: | :---: closeUpload | null | | 取消按钮的点击事件 confirmUpload | uploadedInfoList | array | 确定按钮的点击事件，参数格式：[{"id": "", "url": "", "file_index": 10, "status": 2 }]

使用示例

效果：

代码：

<template>
  <hxz-chunk-upload
    ref="hxz-chunk-upload"
    action="/api/tool/oss/upload3"
    @confirmUpload="confirmUpload"
  />
</template>
<script>
import { hxzChunkUpload } from "hxz-chunk-upload"
import 'hxz-chunk-upload/dist/yxChunkNext.css'
export default {
  name: 'App',
  components: {hxzChunkUpload},
  data () {
    return {
    }
  },
  methods: {
    confirmUpload(info) {
      console.log(info)
    }
  },
  mounted() {
  }
}
</script>
<style>
body,html{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  padding: 30px;
}
</style>