big-file-down

简介

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

• 大文件分流下载：会自行计算请求次数，分片下载
• 并发下载：可自由控制并发数量，默认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;
        }
    }
});