big-file-up/README.md

big-file-up是一款大文件上传的插件

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

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

# 插件使用演示
[点击查看演示](https://cyj.lovewenqin.cn/static/vuethree)
账号：18306058718
密码：888888

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

# 使用方法
## 1.npm安装

```bash
npm i big-file-up
```
## 2.引入

```bash
import { BigFileUp } from "big-file-up";
```
## 3.视频切片使用示例

```javascript
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', //合并触发接口
        requestBefore:(...ags)=>{ // 请求体拦截器
            const url = ags[0];
            if(url === '/index/Mymedia/upUserFile'){
                const {chunkNumber, totalChunks, file, filename, totalSize, identifier } = ags[1]||{};
                const names = filename.split('.');
                // 构建表单
                const form = new FormData();
                form.append('file', file);
                form.append('filename', filename);
                form.append('totalChunks', totalChunks + '');
                form.append('ext', names[names.length-1]);
                form.append('chunkNumber', chunkNumber + '');
                form.append('totalSize', totalSize + '');
                form.append('identifier', identifier);
                return [url, form, ags[2]];
            }else{
                return ags;
            }
        },
        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}> | 是 |

# 注意事项
## 秒传验证返回结构示例
```javascript
{
    bool:true,
    msg:{
        isExist:true, //如果有此参数表示 有相同文件，直接成功
        uploaded:[1,2,7,8], //如果有此参数表示 分片后，第1、2、7、8片的文件是上传了的
    }
}
```
## 最终上传成功后的返回结构示例
```javascript
{
    bool:true,
    msg:{
        filepath:"成功后的地址"
    }
}
```

## 返回统一处理函数替换
```javascript
/**
 * 如返回的参数结构跟此插件不一致，需替换
 * 此插件统一返回结构主要为：{ 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;
        } 
    }
```