原文链接: https://juejin.cn/post/7351300892572745764
作者：大码猴
在Web应用中，文件上传是一项常见的功能。然而，当文件体积过大时，传统的文件上传方式往往会导致页面卡顿，用户体验不佳。为了解决这一问题，我们可以利用Web Worker技术来进行大文件的切片上传。本文将详细介绍如何使用Web Worker进行大文件切片上传，并通过具体的例子来演示其实现过程。
Web Worker简介
Web Worker是Web浏览器提供的一种在后台线程中运行JavaScript的功能。它独立于主线程运行，可以执行计算密集型或长时间运行的任务，而不会阻塞页面的渲染和交互。通过将大文件切片上传的逻辑放在Web Worker中执行，我们可以充分利用浏览器的多线程能力，提高上传速度，并保持页面的流畅运行。
Web Worker基于Vue的基础用法
在Vue项目中配置webpack来使用web-worker涉及几个关键步骤。这主要涉及到处理worker文件的加载，确保它们被正确地打包和引用。以下是一个基本的配置过程：
1.安装worker-loader
首先，你需要安装worker-loader，这是一个webpack的loader，用于处理worker文件。
npm install --save-dev worker-loader
2.配置webpack
module.exports = {
publicPath: './',
chainWebpack: config => {
config.module
.rule('worker')
.test(/\.worker\.js$/) // 如果需要.worker.js后缀
.use('worker-loader')
.loader('worker-loader')
.options({ // 可以查阅worker-loader文档，根据自己的需求进行配置
})
}
}
3.创建和使用worker
创建一个worker文件，并给它一个.worker.js的扩展名。例如，你可以创建一个my-worker.worker.js文件。
// my-worker.worker.js
self.onmessage = function(e) {
console.log('Worker: Hello World');
const result = doSomeWork(e.data);
self.postMessage(result);
};
function doSomeWork(data) {
// 模拟一些工作
return data * 2;
}
在你的Vue组件或其他JavaScript文件中，你可以像下面这样创建一个worker实例：
// MyComponent.vue 或其他.js文件
import MyWorker from './my-worker.worker.js';
export default {
methods: {
startWorker() {
const myWorker = new MyWorker();
myWorker.onmessage = (e) => {
console.log('Main script: Received result', e.data);
};
myWorker.postMessage(100); // 发送数据给worker
}
},
mounted() {
this.startWorker();
}
};
现在，当组件被挂载时，它将启动worker，发送一个消息，并在收到worker的响应时打印结果。
接下来我们进行实战，利用web-worker的机制进行大文件切片上传
实战：实现大文件切片上传
1.逻辑梳理
文件切片：使用 JavaScript 的 Blob.prototype.slice()方法将大文件切分成多个切片。上传切片：使用 axios或其他 HTTP 客户端库逐个上传切片。可以为每个切片生成一个唯一的标识符（例如，使用文件的哈希值和切片索引），以便后端能够正确地将它们合并。客户端线程数：获取用户CPU线程数量，以便最大优化上传文件速度。 控制上传接口的并发数量：防止大量的请求并发导致页面卡死，设计一个线程队列，控制请求数量一直保持在6。
2.实现
我会在文章后面放demo的GitHub源码。
1.获取客户端线程数量
navigator.hardwareConcurrency 是一个只读属性，它返回用户设备的逻辑处理器内核数。
export const getConcurrency = () => navigator.hardwareConcurrency || 4 // 浏览器不支持就默认4核
2.主线程
定义和处理一些必要的常量，并且根据用户的线程数进行开启多线程Web-worker任务处理文件切片。
import { defer, createEventHandler } from 'js-hodgepodge'
import FileWorker from './files.worker'
export const getConcurrency = () => navigator.hardwareConcurrency || 4
export const handleEvent = () => createEventHandler('handleSchedule')
export const sliceFile = file => {
const dfd = defer()
const chunkSize = 1024 // 1Kb
const thread = getConcurrency() // 线程数
const chunks = []
const chunkNum = Math.ceil(file.size / chunkSize) // 切片总数量
const workerChunkCount = Math.ceil(chunkNum / thread) // 每个线程需要处理的切片数量
let finishCount = 0;
for (let i = 0; i < thread; i++) {
const worker = new FileWorker()
// 计算每个线程的开始索引和结束索引
const startIndex = i * workerChunkCount;
let endIndex = startIndex + workerChunkCount;
// 防止最后一个线程结束索引大于文件的切片数量的总数量
if (endIndex > chunkNum) {
endIndex = chunkNum;
}
worker.postMessage({
file,
chunkSize,
startIndex,
endIndex,
});
worker.onmessage = (e) => {
// 接收到 worker 线程返回的消息
for (let i = startIndex; i < endIndex; i++) {
chunks[i] = {
...e.data[i - startIndex],
chunkNum,
filename: file.name
};
}
worker.terminate(); // 关闭线程
finishCount++;
if (finishCount === thread) {
dfd.resolve({
chunks,
chunkNum
});
}
};
}
return dfd
}
3.实现文件切片
首先，我们需要创建一个 Web Worker 脚本，用于处理文件切片和切片hash
import md5 from 'js-md5'
self.onmessage = async function ({
data: {
file,
chunkSize,
startIndex,
endIndex,
}
}) {
const arr = [];
for (let i = startIndex; i < endIndex; i++) {
arr.push(
createChunks(file, i, chunkSize)
);
}
const chunks = await Promise.all(arr)
// 提交线程信息
postMessage(chunks);
}
const createChunks = (
file,
index,
chunkSize
) => {
return new Promise((resolve) => {
// 开始第几个*分片的大小
const start = index * chunkSize;
// 结束时start + 分片的大小
const end = start + chunkSize;
const fileReader = new FileReader();
// 每个切片都通过FileReader读取为ArrayBuffer
fileReader.onload = (e) => {
const content = new Uint8Array(e.target.result);
const files = file.slice(start, end);
const md5s = md5.arrayBuffer(content)
function arrayBufferToHex(buffer) {
let bytes = new Uint8Array(buffer);
let hexString = '';
for (let i = 0; i < bytes.byteLength; i++) {
let hex = bytes[i].toString(16);
hexString += hex.length === 1 ? '0' + hex : hex;
}
return hexString;
}
resolve({
start,
end,
index,
hash: arrayBufferToHex(md5s), // 生成唯一的hash
files,
});
};
// 读取文件的分片
fileReader.readAsArrayBuffer(file.slice(start, end));
});
}
Web Worker通过onmessage事件接收消息。当主线程发送消息时，这个消息会作为参数传递给onmessage函数。
切片hash处理流程：使用FileReader来读取文件内容。当文件分片读取完毕后，会触发onload这个事件,使用new Uint8Array(e.target.result)将读取的ArrayBuffer转换为Uint8Array，再利用js-md5的使用md5.arrayBuffer(content)计算分片的MD5哈希值，使用arrayBufferToHex函数将切片buffer转换为十六进制String，当所有分片处理完毕后，将结果（即分片及其相关信息）发送postMessage回主线程。
4.请求池的设计与处理
我这里创建一个请求队列，并使用 Promise 来控制并发请求的数量。创建一个数组来存储待处理的请求，并使用 Promise 来控制每次只有一定数量的请求被发送。当某个请求完成时，再从队列中取出下一个请求来发送。
export const uploadFile = (
chunks // 总切片
) => {
chunks = chunks || []
let schedule = 0 // 进度
const { dispatch } = handleEvent()
const requestQueue = (concurrency) => {
concurrency = concurrency || 6
const queue = [] // 线程池
let current = 0
const dequeue = () => {
while (current < concurrency && queue.length) {
current++;
const requestPromiseFactory = queue.shift();
requestPromiseFactory()
.then(result => { // 上传成功处理
console.log(result)
schedule++; // 收集上传切片成功的数量
dispatch(window, schedule); // 事件派发，通知进度
})
.catch(error => { // 失败
console.log(error)
})
.finally(() => {
current--;
dequeue();
});
}
}
return (requestPromiseFactory) => {
queue.push(requestPromiseFactory)
dequeue()
}
}
const handleFormData = obj => {
const formData = new FormData()
Object
.entries(obj)
.forEach(([key, val]) => {
formData.append(key, val)
})
return formData
}
const enqueue = requestQueue(6)
for (let i = 0; i < chunks.length; i++) {
enqueue(() => axios.post(
'/api/upload',
handleFormData(chunks[i]),
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
))
}
return schedule
}
利用了第三方库js-hodgepodge的发布订阅，将上传切片成功的数量发布给主界面，得到相应的上传进度。其实这个库的createEventHandler方法我单独写过一篇文章，感兴趣的朋友可以看《CustomEvent实现事件发布订阅（事件之间的通信）》[1]
7.主界面代码
<template>
<div>
<input type="file" ref="file">
<button @click="handleUpload">提交</button>
<p>进度：{{ progress * 100 }}%</p>
</div>
</template>
<script>
import { sliceFile, uploadFile, handleEvent } from './file.utils'
export default {
data() {
return {
progress: 0
}
},
methods: {
async handleUpload() {
const file = this.$refs.file.files[0]
if(!file) {
return
}
console.time()
const dfd = sliceFile(file)
dfd
.promise
.then(({ chunks, chunkNum }) => {
uploadFile(chunks)
const { addEventListener } = handleEvent()
const eject = addEventListener(window, ({ detail: schedule }) => {
this.progress = schedule / chunkNum
if(schedule === chunkNum) { // 上传完成，关闭事件监听
eject()
}
})
})
console.timeEnd()
}
}
}
</script>
<style>
</style>
6.执行响应结果打印
当执行一个大文件上传时，时间可被大大的压缩了。
node后端切片与组合结果
其实整个流程比较重要的就是文件切片，和请求池的设计，具体项目细节请查看源码github.com/LIAOJIANS/f…[2] 如果你觉得还OK，或者对你有帮助的请给个star哦，感谢！或者你有更好的设计欢迎评论区讨论。
https://juejin.cn/post/7349588906911088692: https://juejin.cn/post/7349588906911088692
[2]https://github.com/LIAOJIANS/file-web-worker: https://github.com/LIAOJIANS/file-web-worker
欢迎长按图片添加 poetry 为好友，我会第一时间和你分享前端行业趋势，学习途径，成长内容等等。2024年陪你一起度过！点击领取精心为您整理的前端面试资料
如果觉得这篇内容对你有帮助，我想请你帮我2小忙：
点赞和在看就是最大的支持❤️
