线程代码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.responseTypejson;控制台包提示格式错误建议不设置使用默认设置 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 都可用template div input typefile idfileInput / a-button click点击上传按钮 typeprimary上传/a-button a-button click取消上传 typeprimary取消上传/a-button !-- 进度条-- progress idprogressBar max100 value0/progress div idstatus/div /div /template script import Worker from worker-loader!/workers/worker; //线程集合 var workers [] const 线程数 5 //文件 var file; export default { components: { }, data() { let that this return { 当前第几片 : 0, 总片数 : 0, 每片大小: 1024 * 1024 * 99, // 99 MB chunks (adjust as needed) } }, setup(){ // console.log(this.$route.currentRoute.value.query) // const StrUtil this.$WTool.StrUtil }, created() { let that this }, mounted() { }, methods: { 初始化线程(){ let that this //关闭之前的线程 for (let i 0; i workers.length; i) { workers[i].postMessage({type:安全关闭线程}) } //清空线程 workers [] //初始化线程 for (let i 0; i 线程数; i) { workers.push(new Worker()) console.log(初始化线程: (i1)) } //初始化线程监听回调 for (let i 0; i workers.length; i) { let worker workers[i] worker.onmessage e { const { type, success } e.data switch (type){ case 上传完成: // console.log(主线程:上传完成,继续调用上传方法) that.开始上传文件(i) break default: console.log(未知命令, type) break } } console.log(初始化线程onmessage: (i1)) } }, 取消上传(){ console.log(取消上传开始) for (let i 0; i workers.length; i) { workers[i].postMessage({type:安全关闭线程}) } console.log(取消上传结束) }, 点击上传按钮(){ //获取文件 file document.getElementById(fileInput).files[0] //切片 this.总片数 Math.ceil(file.size / this.每片大小); console.log(分片数量: this.总片数) this.初始化线程() //开始上传 for (let i 0; i workers.length; i) { this.开始上传文件(i); } }, 开始上传文件(子线程id){ let that this //获取线程 let worker workers[子线程id] if(that.当前第几片 that.总片数){ console.log(第几个线程: 子线程id , 上传结束) return } const start that.当前第几片 * this.每片大小; const end Math.min(file.size, start this.每片大小); //文件切片 const chunk file.slice(start, end); if(chunk){ // console.log(子线程id: 第几个线程 -线程,让子线程上传文件,当前第几片:, that.当前第几片) worker.postMessage({type:上传文件, data:{file:chunk, 第几个:that.当前第几片, 子线程id:子线程id}}) that.当前第几片 } } } } /script style /style