简介

本工具支持大文件下载，设置并发下载，暂停/继续，不含界面纯粹的文件上传插件。

• 大文件分流下载：会自行计算请求次数，分片下载
• 并发下载：可自由控制并发数量，默认3个
• 暂停/继续功能：可随时暂停或开启下载

版本更新内容

• 1.5.0版本，优化下载模式
• 1.4.1版本，增加插件演示地址
• 1.4.0版本，增加了可修改最后下载文件名字的字段
• 1.3.0版本，修复了暂停和继续的问题

插件使用演示

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

联系方式

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

使用方法

1.npm安装

npm i big-file-down

2.引入

import { DownFile } from "big-file-down";

3.视频切片使用示例

import { DownFile } from "big-file-down"
const down = document.getElementById("down");
let downObj;
down?.addEventListener("click", () => {
    downObj = new DownFile({
        downUrl:'/index/Mymedia/downFile', //下载地址
        src:'/fenpian/1/水墨画.mov', //文件存放地址（文件名字和后缀会自动从这取）
        headers:{ //请求头
            'user-id':1,
            token:'f97132ab303a1ad9de8bd7fcfa88aec5',
        },
        change(schedule) { //下载进度变化触发函数
            console.log("schedule",schedule)
        },
        changeStatus(status) { //下载状态变化触发函数
            console.log("status",status)
        },
        success:()=>{ //下载成功触发函数
            console.log("下载成功");
        },
        fail(error) { //错误触发函数
            console.log(error)
        },
    })
})
// //暂停下载
// downObj.stop();
// //继续下载
// downObj.start();

参数结构

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----:| :----: | :----: | :----: | :----: | | downUrl | 下载文件的请求地址 | string | - | - | | getSizeUrl | 获取下载的文件大小 | string | - | - | | size | 每次下载多大，单位：M | number | - | 2 | | src | 文件地址 | string | - | - | | fileName | 可修改最终下载后的文件名 | string | - | - | | headers | 请求头 | Record<string, any> | - | - | | count | 并发数 | number | - | 3 | | auto | 数据传输完成，是否直接触发下载 | boolean | - | true | | type | 下载模式 | number | 1或2 | 1 | | success | 成功完成函数 | () => void | - | - | | fail | 报错触发函数 | (error: string ) => void | - | - | | change | 下载进度变化触发函数 | (schedule:number) => void | - | - | | changeStatus | 请求状态变化触发函数 | (status:status) => void | - | - | | beforeRequest | 下载函数掉用前的数据处理| (data:any) => any | - | - | | beforeResponse | 下载函数掉用前的数据处理| (data:any) => ResponseApi|Blob | - | - |

方法说明

| 方法名称 | 说明 | 参数 | 参数是否必传 | | :----:| :----: | :----: | :----: | | start | 继续下载 | - | - | | stop | 暂停下载 | - | - |

注意事项

获取文件大小是GET方法

分片下载文件是POST方法

获取文件大小接口在getSizeUrl参数没有得情况下，默认使用downUrl参数

返回统一处理函数替换

/**
 * 如返回的参数结构跟此插件不一致，需替换
 * 此插件统一返回结构主要为：{ bool:Boolean, msg:string｜{[key:string]:any} }｜Blob
 * bool：true为成功的返回，false：失败的返回，需要触发错误函数的
 * msg：错误返回这个就是错误的提示语
 */
/**
 * 下面是替换处理函数的示例
 * 如统一返回的结构为：{code:number, data:any, message:string} | Blob
 * code：0为成功，其他的为失败
 * data：数据
 * message：提示语
 */
//方法一 ：
const bigFIleUp = new BigFileUp({
    ...,
    beforeResponse:function(response: any){
        const type = Object.prototype.toString.call(response);
        //由于有下载，下载的时候会有直接返回Bolb这种情况
        if(type === "[object Object]"){//这种主要用于获取文件大小
            if(response.code === 0){
                return {bool:true,msg:response.data};
            }else{
                return {bool:false,msg:response.message};
            }
        }else if(type === '[object Blob]'){ //直接返回的Bolb类型，下载
            return response;
        }
    }
});