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

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

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

安装

// 安装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"
// 在components中加入本插件
components: {hxzChunkUpload},
// 在template中加入本插件
<hxz-chunk-upload />

参数

上传接口参数

上传接口应按照如下返回

{
    "status": 200,
    "message": "success",
    "data": {
        "id": "", // 文件ID，当合并分片后，返回
        "message": "", // 提示信息
        "url": "", // 文件url，当合并分片后，返回
        "file_index": 1, // 分片索引
        "status": 1 // 1--非最后一个分片，2--最后一个分片（合并分片后返回2）
    }
}

事件

使用示例

<template>
  <hxz-chunk-upload
    ref="hxz-chunk-upload"
    action="/api/tool/oss/upload3"
    @confirmUpload="confirmUpload"
  />
  <!-- :multiple="false" -->
</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>