Vue-upload-utils

分片上传组件&上传工具

默认组件示例

1.内置默认上传组件

2.自定义上传组件（看下面）

使用示例

<script setup>
import {reactive} from "vue";
import {Uploader} from "vue-upload-utils";
const fileList = reactive([]);
const op= {
  url: 'http://127.0.0.1:8080/file/chunk-upload', // 上传地址
  mergeUrl: 'http://127.0.0.1:8080/file/merge', // 合并文件地址
  secUrl: 'http://127.0.0.1:8080/file/sec-upload', // 秒传校验
  bindUploadDOMById: 'uploader', // 绑定上传按钮的DOM元素ID 默认 uploader
  taskFileList: fileList, // 上传文件列表
}
</script>
<template>
  <Uploader :auto-upload="true" :option="op" desc="支持扩展名: .rar .zip .doc .docx .pdf .jpg, 单个文件不超过10Mb。"/>
</template>

main.js

import 'vue-upload-utils/style.css'

option参数格式

export interface options {
    url: string, // 上传地址
    mergeUrl?: string, // 合并地址
    secUrl?: string, // 秒传校验地址
    singleFile?: boolean, // 是否上传多个文件
    chunkSize?: number, // 分块大小
    simultaneousUploads?:number, // 同时上传的文件片段数量
    checkChunkUploaded?: Function, // 检查文件片段是否已上传
    maxChunkRetries?: number, // 最大重试次数
    bindUploadDOMById: string, // 绑定上传按钮的DOM元素
    taskFileList: any[], // 上传文件列表
    filesAdded?:Function, // 文件添加时的回调
    fileSuccess?:Function, // 文件上传成功的回调
    fileProgress?:Function, // 文件上传进度的回调
    fileError?:Function, // 文件上传进度的回调
    secUpload?:Function, // 前提：手使用默认fileSuccess 秒传检测的回调，在这里发送秒传请求
    doMerge?:Function, // 前提 使用默认fileProgress合并请求的回调,在这里发送合并请求
}

数据格式

上传接口

前端数据格式

chunkNumber: 12
chunkSize: 5242880
currentChunkSize: 5242880
totalSize: 116011821
identifier: fc718fdd39e50f8b2a86f58ddfd8d8e5
filename: Chrome_126.0.6478.115_64bit_Portable.7z
relativePath: Chrome_126.0.6478.115_64bit_Portable.7z
totalChunks: 22
file: （二进制）

后端返回

mergeFlag:是否开始合并 1：合并 2：：不合并

{"code":"200","msg":"成功","data":{"mergeFlag":0}}

合并

前端数据

{
    "filename": "Chrome_126.0.6478.115_64bit_Portable.7z",
    "identifier": "fc718fdd39e50f8b2a86f58ddfd8d8e5",
    "totalSize": 116011821
}

后端 result:合并是否成功

{"code":"200","msg":"成功","data":{"result":true}}

秒传校验

前端参数

{
    "filename": "config.json",
    "identifier": "a0bd812b793e8e2ca80f251936f4ddd0",
    "parentId": "0f6cd9de-41a1-4f74-9d9c-948e65994be0"
}

后端

{"code":"200","msg":"成功","data":{"result":false}}

如何使用自己的上传组件

例子:

<script setup>
import {reactive, onMounted,watch} from "vue";
import {initUpload,uploadSingleSubmit } from "vue-upload-utils";

const fileList = reactive([]);
const op = {
  url: 'http://127.0.0.1:8080/file/chunk-upload', // 上传地址
  mergeUrl: 'http://127.0.0.1:8080/file/merge', // 合并文件地址
  secUrl: 'http://127.0.0.1:8080/file/sec-upload', // 秒传校验
  bindUploadDOMById: 'upBtn', // 绑定上传按钮的DOM元素ID
  taskFileList: fileList, // 上传文件列表
}
onMounted(() => {
  initUpload(op)
})
//监听 fileList
watch(fileList, (newVal, oldVal) => {
  console.log(newVal)
})
function uploadFile() {
  uploadSingleSubmit(fileList[0])
}
</script>

<template>
  <button class="bt" id="upBtn">上传文件</button>
  <p v-for="(item, index) in fileList" :key="index">
    {{ item.filename }}
  </p>
  <button v-show="fileList.length > 0" style="padding: 2px;border: 1px solid #ccc;" @click="uploadFile" >开始上传</button>
</template>

<style scoped>
.bt {
  border: 1px solid #ccc;
  padding: 0.75rem;
}
</style>

工具类

fileListUtils

import {fileListUtils} from "vue-upload-utils";

fileListUtils: {
    getTask: (filename: string) => any;
    remove: (filename: string) => void;
    removeTarget: (filename: string) => void;
    add: (taskItem: any) => void;
    clear: () => void;
    pause: (filename: string) => void;
    resume: (filename: string) => void;
    cancel: (filename: string) => void;
    retry: (filename: string) => void;
    updateStatus: (param: any) => void;
    updateProcess: (param: any) => void;
};

uploadUtils

import {uploadUtils} from "vue-upload-utils";

uploadUtils: {
    translateFileSize(fileSize: any): string;
    fileStatus: {
        PARSING: {
            code: number;
            text: string;
        };
        WAITING: {
            code: number;
            text: string;
        };
        UPLOADING: {
            code: number;
            text: string;
        };
        PAUSE: {
            code: number;
            text: string;
        };
        SUCCESS: {
            code: number;
            text: string;
        };
        FAIL: {
            code: number;
            text: string;
        };
        MERGE: {
            code: number;
            text: string;
        };
    };
    translateTime(timeRemaining: any): string;
    translateSpeed(byteSpeed: string): string;
    generateUUID(): string;
    MD5(file: File, callback: Function): void;
}