线程代码

worker.js

//实例化一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
let 延迟关闭线程等待时间毫秒 = 6000function 取消上传(){try {xhr.abort()}catch (e) {}
}addEventListener('message', e => {const { type, data } = e.data// console.log('子线程:',data)switch (type){case '上传文件':上传文件(data.file,data.第几个, data.子线程id)breakcase '取消上传':取消上传()breakcase '安全关闭线程':取消上传()setTimeout(self.close, 延迟关闭线程等待时间毫秒)breakcase '关闭线程':self.close()breakdefault: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 都可用

<template><div><input type="file" id="fileInput" /><a-button @click="点击上传按钮" type="primary">上传</a-button><a-button @click="取消上传" type="primary">取消上传</a-button>
<!--    进度条--><progress id="progressBar" max="100" value="0"></progress><div id="status"></div></div>
</template>
<script>import Worker from "worker-loader!@/workers/worker";
//线程集合
var workers = []
const 线程数 = 5
//文件
var file;export default {components: {},data() {let that = thisreturn {当前第几片 : 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('初始化线程:' + (i+1))}//初始化线程监听回调for (let i = 0; i < workers.length; i++) {let worker = workers[i]worker.onmessage = e => {const { type, success } = e.dataswitch (type){case '上传完成':// console.log('主线程:上传完成,继续调用上传方法')that.开始上传文件(i)breakdefault:console.log('未知命令', type)break}}console.log('初始化线程onmessage:' + (i+1))}},取消上传(){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>