hxz-chunk-upload v1.2.1

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 />

参数

上传接口参数

上传接口应按照如下返回

{
    "status": 200,
    "message": "success",
    "data": {
        "message": "", // 提示信息
        "url": "", // 文件url，当合并分片后，返回
        "file_index": 1, // 分片索引，从1开始，数值型
        "status": 1 // 1--非最后一个分片，2--最后一个分片（合并分片后返回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>