上海未来网站建设公司厦门专业做优化的公司
分片上传需求分析：
项目中很多地方需要上传视频，如果视频很大，上传到服务器需要很多时间 ，这个时候体验就会很差。所以需要前端实现分片上传的功能。
要实现分片上传，需要对视频进行分割，分割成不同的大小进行上传，但是在上传的时候后台需要知道文件的唯一标识，进行识别，避免是重复数据上传，这个时候我们可以使用hash对内容进行生成唯一标识。
第一种方法实现：
html文件:
<input type="file" id="videoFile" accept="video/*" />javascript 文件：
document.getElementById('uploadBtn').addEventListener('click', async () => {const fileInput = document.getElementById('videoFile');const file = fileInput.files[0];if (!file) {alert('请选择一个文件');return;}const chunkSize = 5 * 1024 * 1024; // 每个分片的大小，例如 5MB//分析存在几个分片，假如文件是10M ，那就是两个分片。const totalChunks = Math.ceil(file.size / chunkSize);//唯一id，这个是必须的，用来区分不同的分片const fileId = Date.now().toString(); // 生成一个唯一的文件ID//遍历分片，去分别上传到服务器for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {const start = chunkNumber * chunkSize;const end = Math.min(start + chunkSize, file.size);const chunk = file.slice(start, end);//处理数据给后端需要的格式const formData = new FormData();formData.append('file', chunk);formData.append('fileId', fileId);formData.append('chunkNumber', chunkNumber);formData.append('totalChunks', totalChunks);formData.append('fileName', file.name);try {const response = await fetch('/upload', {method: 'POST',body: formData,});if (!response.ok) {throw new Error('上传失败');}console.log(`分片 ${chunkNumber + 1}/${totalChunks} 上传成功`);} catch (error) {console.error('上传出错:', error);break;}}console.log('所有分片上传完成');
});
分析一下上面的formData:
更多的数据格式参考文章：点击跳转
服务端处理：
服务器端需要处理每个分片的上传请求，并在所有分片上传完成后将其合并。
接受分片：
服务器端可以使用类似以下的代码来接收分片：
app.post('/upload', (req, res) => {const { fileId, chunkNumber, totalChunks, fileName } = req.body;const chunk = req.files.file;// 保存分片到临时目录const chunkPath = `./temp/${fileId}-${chunkNumber}`;fs.writeFileSync(chunkPath, chunk.data);res.send({ success: true });
});
合并分片：
当所有分片上传完成后，服务器端可以将它们合并成一个完整的文件：
app.post('/merge', (req, res) => {const { fileId, totalChunks, fileName } = req.body;const outputPath = `./uploads/${fileName}`;const writeStream = fs.createWriteStream(outputPath);for (let i = 0; i < totalChunks; i++) {const chunkPath = `./temp/${fileId}-${i}`;const chunk = fs.readFileSync(chunkPath);writeStream.write(chunk);fs.unlinkSync(chunkPath); // 删除临时分片}writeStream.end();res.send({ success: true });
});
前端通知服务器合并分片
在所有分片上传完成后，前端可以发送一个请求通知服务器合并分片：
fetch('/merge', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({fileId: fileId,totalChunks: totalChunks,fileName: file.name,}),
});
第二种具体实现：
这个地方使用hash （spark-md5 第三方依赖）生成唯一标识，这个方式只对前端分片进行了封装，可以结合上面的代码传递给后端。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>视频分片上传</title></head><body><input type="file" id="file"/><script src="../node_modules/spark-md5/spark-md5.js"></script><script>const inp = document.querySelector('#file');inp.onchange = async () => {const file = inp.files[0];if(!file){alert("文件不存在！");}const chunks = createChunks(file,10*1024*1024);console.log(chunks);const result = await hash(chunks);console.log(result);}//生成hashfunction hash(chunks){return new Promise((resolve, reject) => {const spark = new SparkMD5();function _read(i){if(i>=chunks.length){resolve(spark.end());return;}const blob = chunks[i];const reader = new FileReader();reader.onload = function(e){const bytes = e.target.result;//读取到的字节数组spark.append(bytes);_read(i+1)}reader.readAsText(blob);}_read(0);})}function createChunks(file,chunkSize){const result = [];for (let i = 0; i < file.size; i+=chunkSize) {result.push(file.slice(i,i+chunkSize));}return result;}
</script></body>
</html>