切片上传version2.0 进度用模拟后端实时返回的进度，大文件1.05GB耗时7.49秒

前端文件

// 1 安装依库 npm install spark-md5 --save

// 2 引入 import SparkMD5 from "spark-md5";

<template><div class="upload-container"><input type="file" @change="handleFileChange" /><button @click="upload" :disabled="!file">上传</button><div v-if="progress > 0" class="progress">上传进度：{{ progress.toFixed(2) }}%</div><!-- 全屏 Loading 遮罩 --><div v-if="loading" class="loading-overlay"><div class="spinner"></div><p>文件上传中，请稍候...</p></div></div>
</template><script setup>
import { ref } from "vue";
import SparkMD5 from "spark-md5";
// 1 安装依库 npm install spark-md5 --save
// 2 引入 import SparkMD5 from "spark-md5";
const file = ref(null);
const progress = ref(0);
const loading = ref(false);
const chunkSize = 3 * 1024 * 1024; // 每片3MBfunction handleFileChange(e) {progress.value = 0;console.log("🚀 ~ handleFileChange ~ e:", e.target.files)file.value = e.target.files[0];console.log("🚀 ~ handleFileChange ~ file.value :", file.value)
}// 上传主流程
async function upload() {if (!file.value) return;loading.value = true; // 打开全屏遮罩const fileSize = file.value.size;const chunkCount = Math.ceil(fileSize / chunkSize);const chunkAll = [];// 生成分片for (let i = 0; i < chunkCount; i++) {const start = i * chunkSize;const end = Math.min(fileSize, start + chunkSize);const blob = file.value.slice(start, end);chunkAll.push({ index: i, blob });}// 计算整文件MD5（这里只是示例）const fullMd5 = await calculateFileMD5(file.value);// 逐片上传并实时更新进度for (let i = 0; i < chunkAll.length; i++) {const formData = new FormData();formData.append("chunk", chunkAll[i].blob, `chunk${i}`);formData.append("index", String(i));formData.append("chunkCount", String(chunkCount));formData.append("fileSize", Number(fileSize));// 最后一片加上 MD5 表示结束if (i === chunkAll.length - 1) {formData.append("MD5", fullMd5);}const res = await fetch("http://localhost:3000/upload", {method: "POST",body: formData,});const result = await res.json();loading.value = false; // 上传完成关闭遮罩console.log("🚀 ~ 后端返回 ~ result:", result)// 根据后端返回的 progress 更新if (result.progress !== undefined) {progress.value = result.progress;}if (result.isLast) {progress.value = 100;alert("上传完成！");}}
}
// 计算整文件MD5
function calculateFileMD5(file) {return new Promise((resolve) => {const reader = new FileReader();const spark = new SparkMD5.ArrayBuffer();reader.readAsArrayBuffer(file);reader.onload = (e) => {spark.append(e.target.result);resolve(spark.end());};});
}
</script><style scoped>
.upload-container {padding: 20px;
}button {margin-left: 10px;padding: 5px 10px;
}.progress {margin-top: 10px;color: #2c7a7b;
}/* 全屏遮罩样式 */
.loading-overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.6);display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;font-size: 18px;z-index: 9999;
}/* 动画 */
.spinner {border: 6px solid rgba(255, 255, 255, 0.2);border-top: 6px solid #fff;border-radius: 50%;width: 50px;height: 50px;animation: spin 0.9s linear infinite;margin-bottom: 16px;
}@keyframes spin {to {transform: rotate(360deg);}
}
</style>

后端文件

模拟后端大文件分片上传服务

1pnpm init -y

2pnpm install express multer cors

3  打开终端 cmd node启动 node bigfileserver.js

/* 
模拟后端大文件分片上传服务
1pnpm init -y
2pnpm install express multer cors
3  打开终端 cmd node启动 node bigfileserver.jsexpress：Web 框架multer：处理 multipart/form-data（文件上传）cors：允许前端跨域请求
*/
import express from "express";
import multer from "multer";
import cors from "cors";
import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";// __dirname 在 ES Module 下需要自己定义
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);const app = express();
const PORT = 3000;app.use(cors());// 设置上传目录
const upload = multer({ dest: "uploads/" });// 用于记录上传开始时间
let startTime = null;
function formatFileSize(bytes) {if (bytes < 1024) return bytes + " B";else if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(2) + " KB";else if (bytes < 1024 ** 3) return (bytes / 1024 / 1024).toFixed(2) + " MB";else return (bytes / 1024 / 1024 / 1024).toFixed(2) + " GB";
}app.post("/upload", upload.single("chunk"), (req, res) => {if (!startTime) startTime = Date.now();const chunk = req.file;const index = Number(req.body.index);      // 前端传递当前分片索引const chunkCount = Number(req.body.chunkCount); // 前端传总分片数const fileSize = Number(req.body.fileSize);const targetPath = path.join(__dirname, "uploads", chunk.originalname);fs.renameSync(chunk.path, targetPath); // 保存分片console.log(`分片 ${index + 1}/${chunkCount} 保存成功，大小: ${formatFileSize(chunk.size)}`);// 返回当前进度给前端const progress = ((index + 1) / chunkCount) * 100; const isLast = req.body.MD5 ? true : false;if (isLast) {const endTime = Date.now();console.log(`上传完成，总耗时: ${((endTime - startTime)/1000).toFixed(2)} 秒`);console.log(`上传完成，总大小: ${formatFileSize(fileSize)}`);startTime = null;}res.json({ code: 0, msg: "分片上传成功", progress, isLast });
});app.listen(PORT, () => {console.log(`Server running on http://localhost:${PORT}`);
});