简介

本工具支持多文件上传，多线程计算，切片并发上传，秒传，断点续传，暂停，修改上传优先级等功能，不含界面纯粹的文件上传插件。

• 多文件上传：可传入多个文件
• 文件分片：可设置分片大小，多线程自动计算md5值
• 并发上传：可自由控制并发数量，默认3个
• 秒传：用于检测服务器上是否拥有相同的文件，有则直接成功
• 断点续传：可让后端根据计算的md5值返回之前已上传的文件，直接上传剩余文件即可
• 暂停功能：可随时暂停或开启上传功能
• 修改优先级：在并发量多余的情况下，优先级越高的上传速度越快，会自动分配并发量

版本更新内容

• 2.3.2版本，增加联系方式
• 2.3.1版本，增加演示地址查看
• 2.3.0版本，修复插件多线程无法启动导致插件不能使用的问题
• 支持传入多文件同时上传，同时上传数量有限制，防止浏览器压力过大等问题
• 增加设置上传优先级功能
• 修改开始或暂停一个的方法，需传入暂停文件对象
• 增加开始或暂停全部上传功能
• 将秒传验证从get方法改为post

插件使用演示

点击查看演示 账号：18306058718 密码：888888

联系方式

q:1805231651，有问题可联系我更改

使用方法

1.npm安装

npm i big-file-up

2.引入

import { BigFileUp } from "big-file-up";

3.视频切片使用示例

import { BigFileUp } from "big-file-up";
const inputDom = document.getElementById("chooseFile");
const stop = document.getElementById("stop");
const start = document.getElementById("start");
const stopAll = document.getElementById("stopAll");
const startAll = document.getElementById("startAll");
let fileList = [];
let bigFIleUp;
/**
 * 选择文件
 */
inputDom?.addEventListener("change", (res) => {
    const input: any = res.target
    fileList = Array.from(input.files)
    bigFIleUp = new BigFileUp({
        file:fileList,
        auto: true, //自动上传
        fast: true, //秒传
        checkUrl: '/Mymedia/upUserFile', //秒传验证接口
        upUrl: '/Mymedia/upUserFile', //上传分片文件接口
        mergeUrl: '/Mymedia/upUserFile?action=merge', //合并触发接口
        requestHeaders: { //请求头携带参数
            'user-id': 1,
            token: '',
        },
        change: (data) => { //变化监听
            console.log("状态或者进度改变了------", data)
            const { type, file} = data
            console.log("当前改变文件为：",file);
            if (type === 'state') { //状态改变
                console.log("当前状态为:" + data[type])
            } else { //进度改变
                console.log("当前进度比例为:" + data[type])
            }
        },
        success: ({file, url}) => { //上传成功触发函数
            console.log("当前上传成功文件为：",file)
            time = new Date().getTime() - time;
            console.log(time + "上传成功后返回的地址：" + url)
        },
        fail: ({file,message}) => { //上传错误触发函数
            console.log("当前失败文件为：",file)
            console.log("上传出错了：" + message);
        }
    })
    //设置第一个文件优先级为高
    bigFIleUp.setPriority([{file:fileList[0],priority:'high'}])
})
/**
 * 暂停
 */
stop?.addEventListener("click", () => {
    bigFIleUp.stop();
})
/**
 * 开始或者继续
 */
start?.addEventListener("click", () => {
    bigFIleUp.start();
})
/**
 * 全部暂停
 */
stopAll?.addEventListener("click", () => {
    bigFIleUp.stopAll();
})
/**
 * 全部开始
 */
startAll?.addEventListener("click", () => {
    bigFIleUp.startAll();
})

参数结构

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----:| :----: | :----: | :----: | :----: | | file | 需要上传的文件 | File | - | - | | auto | 是否自动触发上传 | Boolean | true/false | true | | size | 分片大小，单位：M | number | - | 2 | | fast | 是否开启秒传 | Boolean | true/false | false | | checkUrl | 秒传验证地址 | string | - | - | | upUrl | 分片上传地址 | string | - | - | | mergeUrl | 合并地址 | string | - | - | | requestNum | 总的并发数 | number | 正整数 | 3 | | requestHeaders | 请求头 | Record<string, any> | - | - | | success | 成功完成函数 | (data: { file: File, url: string }) => void | - | - | | fail | 报错触发函数 | (error: { file?: File, message: string }) => void | - | - | | response | 统一请求返回处理函数| (response: any) => ResponseApi | - | - | | change | 状态或者进度变化 | (data: changeDataApi) => void | - | - |

方法说明

| 方法名称 | 说明 | 参数 | 参数是否必传 | | :----:| :----: | :----: | :----: | | start | 开始或者继续上传 | file:File | 是 | | startAll | 全部开始 | - | - | | stop | 暂停上传 | file:File | 是 | | stopAll | 全部暂停 | - | - | | setRequestHeaders | 设置请求头 | headers: Record<string, any> | 是 | | setResponse | 设置返回拦截 | response: (data: any) => ResponseApi | 是 | | setPriority | 设置上传优先级 | list:Array<{file: File, priority: priorityType}> | 是 |

注意事项

秒传验证返回结构示例

{
    bool:true,
    msg:{
        isExist:true, //如果有此参数表示 有相同文件，直接成功
        uploaded:[1,2,7,8], //如果有此参数表示 分片后，第1、2、7、8片的文件是上传了的
    }
}

最终上传成功后的返回结构示例

{
    bool:true,
    msg:{
        filepath:"成功后的地址"
    }
}

返回统一处理函数替换

/**
 * 如返回的参数结构跟此插件不一致，需替换
 * 此插件统一返回结构主要为：{ bool:Boolean, msg:string｜{[key:string]:any} }
 * bool：true为成功的返回，false：失败的返回，需要触发错误函数的
 * msg：错误返回这个就是错误的提示语
 */
/**
 * 下面是替换处理函数的示例
 * 如统一返回的结构为：{code:number, data:any, message:string}
 * code：0为成功，其他的为失败
 * data：数据
 * message：提示语
 */
//方法一 ：
const bigFIleUp = new BigFileUp({
    ...,
    response:function(response: any){
        if(response.code === 0){ //正确的返回
            /**
             * response.data的参数结构需为：
             * {
             * filepath?: string,  成功后返回的文件地址
             * isExist?: Boolean,  是否检查到有同样的文件，直接秒传成功
             * uploaded?: Array<number>,  返回已成功上传的部分，如[1,2]代表第1、2片已被上传过
             * }
             */
            return response.data
        }else{ //错误的话直接触发错误函数
            this.error(response.message);
            return false;
        } 
    }
});
//方法二：
bigFIleUp.setResponse = (response: any)=>{
        if(response.code === 0){ //正确的返回
            /**
             * response.data的参数结构需为：
             * {
             * filepath?: string,  成功后返回的文件地址
             * isExist?: Boolean,  是否检查到有同样的文件，直接秒传成功
             * uploaded?: Array<number>,  返回已成功上传的部分，如[1,2]代表第1、2片已被上传过
             * }
             */
            return response.data
        }else{ //错误的话直接触发错误函数
            bigFIleUp.error(response.message);
            return false;
        } 
    }