【前端】大文件切片上传性能优化 使用 web worker 多线程

线程代码

worker.js

//实例化一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
let 延迟关闭线程等待时间毫秒 = 6000


function 取消上传(){
    try {
        xhr.abort()
    }catch (e) {
    }
}


addEventListener('message', e => {
    const { type, data } = e.data
    // console.log('子线程:',data)
    
    switch (type){
        case '上传文件':
            上传文件(data.file,data.第几个, data.子线程id)
            break
        case '取消上传':
            取消上传()
            break
        case '安全关闭线程':
            取消上传()
            setTimeout(self.close, 延迟关闭线程等待时间毫秒)
            break
        case '关闭线程':
            self.close()
            break
        default:
            console.log('未知命令')
            break
    }
    
    // postMessage('子线程发送的消息')
})


function 上传文件 (file, 第几个, 子线程id){

    console.log('子线程id:' + 子线程id + ', 第:' + 第几个 + '片-开始上传')
    
    // 这个要放到调用open函数之前！！！
    xhr.upload.onprogress = function (e) {
        //  e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
        if (e.lengthComputable) {
            // 多个文件总共大小，以及已上传大小
            // console.log(e.total,e.loaded);
            // e.loaded 已传输的字节  e.total 文件传输需要的总字节
            var percentComplete = Math.ceil((e.loaded / e.total) * 100); // Math.ceil() 向上取整
            // console.log('子线程id:' + 子线程id + ', 第几片:' + 第几个 + '-当前进度:', percentComplete)
        }
    };

    // 文件上传成功
    xhr.upload.onload = function () {
        // console.log('文件上传完成')
    };

    // open 必须放 xhr.send() 前面
    //设置请求方式及接口地址
    xhr.open('POST', 'http://127.0.0.1:8088/robot/flow/upload', true);
    // xhr.setRequestHeader('Content-Type', 'application/octet-stream');

    xhr.onload = function () {
        // self.postMessage({ status: 'chunk_uploaded', message: 'Chunk uploaded successfully' });
    };

    xhr.onerror = function () {
        console.log('上传出错-子线程id:' + 子线程id + ', 第:' + 第几个 + '片')
        // self.postMessage({ status: 'error', message: 'Error uploading chunk' });
    };

    const formData = new FormData();
    formData.append('file', file);
    // formData.append('currentChunk', currentChunk + 1);
    // formData.append('totalChunks', totalChunks);

    xhr.onreadystatechange = (e) => {　　//服务端响应后
        /*
        0 未打开，xhr.open()方法还未被调用.
        1 未发送, xhr.send()方法还未被调用.
        2 已获取响应头,xhr.send()方法已经被调用, 响应头和响应状态已经返回.
        3 正在下载响应体, xhr.响应体下载中; responseText中已经获取了部分数据.
        4 请求完成, 整个请求过程已经完毕.
        * */
        if (xhr.readyState == 4) {　　//判断客户端是否可以使用
            if(xhr.status == 200){    //表示成功处理请求
                // 如果定义为  xhr.responseType='json';，控制台包提示格式错误，建议不设置，使用默认设置
                console.log('子线程id:' + 子线程id + ',第几片:' + 第几个 + '-上传完成:', xhr.responseText)
                self.postMessage({ type:'上传完成', success: true, message: '上传成功' });
            }else{
                console.log(xhr.status+' '+xhr.statusText)
            }
        }
    }
    
    // 一般放在最后
    xhr.send(formData)
}


export default {}

引用线程 指定线程数

import Worker from "worker-loader!@/workers/worker";
//线程集合
var workers = []
const 线程数 = 5

代码  vue js 都可用