Vue 大文件切片上传实现指南包会，含【并发上传切片，断点续传，服务器合并 - ToB企服应用市场:ToB评测及商务社交产业平台

<template>
<div>
<input type="file" @change="handleFileChange" accept="video/*" />
<button @click="handleUpload">Upload</button>
<div v-if="uploadProgress > 0">
Upload Progress: {{ uploadProgress }}%
</div>
</div>
</template>

复制代码

async computeFileHash(file) {
const spark = new SparkMD5.ArrayBuffer();
const fileReader = new FileReader();
return new Promise((resolve) => {
fileReader.onload = (e) => {
spark.append(e.target.result);
const hash = spark.end();
resolve(hash);
};
fileReader.readAsArrayBuffer(file);
});
}

复制代码

// 向服务器查询文件是否已经部分或完全上传
async checkFile(fileHash) {
<--- 此处应替换为你的接口调用代码 --->
// 假设接口返回 { shouldUpload: boolean, uploadedChunks: Array<number> }
return { shouldUpload: true, uploadedChunks: [] };
},

复制代码

// 切片并准备上传
sliceFileAndUpload(fileHash, uploadedChunks) {
const chunkSize = 10 * 1024 * 1024; // 切片大小，这里是10MB
this.chunkCount = Math.ceil(this.selectedFile.size / chunkSize); // 计算总切片数
this.uploadProgress = 0; // 重置上传进度
for (let i = 0; i < this.chunkCount; i++) {
if (uploadedChunks.includes(i)) continue; // 跳过已上传的切片
const chunk = this.selectedFile.slice(i * chunkSize, (i + 1) * chunkSize); // 获取切片
this.requestPool.push({ chunk, index: i }); // 加入请求池
}
this.processPool(fileHash); // 开始处理请求池
},

复制代码

// 处理请求池中的切片上传
processPool(fileHash) {
while (this.requestPool.length > 0 && this.MAX_REQUEST > 0) {
const { chunk, index } = this.requestPool.shift(); // 取出一个待上传的切片
this.uploadChunk(chunk, fileHash, index) // 上传切片
.then(() => {
this.uploadedChunksCount++; // 更新已上传切片数量
this.uploadProgress = ((this.uploadedChunksCount / this.chunkCount) * 100).toFixed(2); // 更新上传进度
if (this.requestPool.length > 0) {
this.processPool(fileHash); // 继续处理请求池
} else if (this.uploadedChunksCount === this.chunkCount) {
// 所有切片都已上传，通知服务器合并
this.notifyServerToMerge(fileHash);
}
})
.finally(() => {
this.MAX_REQUEST++; // 释放一个请求槽
});
this.MAX_REQUEST--; // 占用一个请求槽
}
},

复制代码

// 通知服务器合并切片
notifyServerToMerge(fileHash) {
// 通知服务器合并切片，应替换为真实的合并API调用
console.log(`通知服务器将文件与哈希合并: ${fileHash}`);
},

复制代码

<template>
<div>
<input type="file" @change="handleFileChange" accept="video/*" />
<button @click="handleUpload">Upload</button>
<div v-if="uploadProgress > 0">
Upload Progress: {{ uploadProgress }}%
</div>
</div>
</template>
<script>import axios from "axios";import SparkMD5 from "spark-md5"; // 引入SparkMD5用于计算文件的MD5值export default { data() { return { selectedFile: null, // 用户选择的文件 uploadProgress: 0, // 上传进度 requestPool: [], // 哀求池，存储待上传的切片信息 MAX_REQUEST: 6, // 最大并发哀求数量 chunkCount: 0, // 文件切片总数 uploadedChunksCount: 0, // 已上传的切片数量 }; }, methods: { // 处置惩罚文件选择事故 async handleFileChange(event) { this.selectedFile = event.target.files[0]; if (!this.selectedFile) return; // 未选择文件则返回 // 可以在这里添加文件格式校验 const fileHash = await this.computeFileHash(this.selectedFile); // 计算文件hash const { shouldUpload, uploadedChunks } = await this.checkFile(fileHash); // 检查文件是否需要上传 if (!shouldUpload) { alert("文件已存在，秒传乐成！"); this.uploadProgress = 100; // 直接设置进度为100% return; } this.sliceFileAndUpload(fileHash, uploadedChunks); // 切片并上传 }, // 计算文件的MD5 computeFileHash(file) { return new Promise((resolve) => { const spark = new SparkMD5.ArrayBuffer(); const fileReader = new FileReader(); fileReader.onload = (e) => { spark.append(e.target.result); const hash = spark.end(); resolve(hash); // 返回计算得到的hash值 }; fileReader.readAsArrayBuffer(file); }); }, // 检查文件是否已经上传过 async checkFile(fileHash) { // 应替换为真实的API调用来检查文件状态 return { shouldUpload: true, uploadedChunks: [] }; // 模仿返回值 }, // 切片并预备上传 sliceFileAndUpload(fileHash, uploadedChunks) { const chunkSize = 10 * 1024 * 1024; // 切片巨细，这里是10MB this.chunkCount = Math.ceil(this.selectedFile.size / chunkSize); // 计算总切片数 this.uploadProgress = 0; // 重置上传进度 for (let i = 0; i < this.chunkCount; i++) { if (uploadedChunks.includes(i)) continue; // 跳过已上传的切片 const chunk = this.selectedFile.slice(i * chunkSize, (i + 1) * chunkSize); // 获取切片 this.requestPool.push({ chunk, index: i }); // 参加哀求池 } this.processPool(fileHash); // 开始处置惩罚哀求池 }, // 处置惩罚哀求池中的切片上传 processPool(fileHash) { while (this.requestPool.length > 0 && this.MAX_REQUEST > 0) { const { chunk, index } = this.requestPool.shift(); // 取出一个待上传的切片 this.uploadChunk(chunk, fileHash, index) // 上传切片 .then(() => { this.uploadedChunksCount++; // 更新已上传切片数量 this.uploadProgress = ((this.uploadedChunksCount / this.chunkCount) * 100).toFixed(2); // 更新上传进度 if (this.requestPool.length > 0) { this.processPool(fileHash); // 继承处置惩罚哀求池 } else if (this.uploadedChunksCount === this.chunkCount) { // 所有切片都已上传，通知服务器合并 this.notifyServerToMerge(fileHash); } }) .finally(() => { this.MAX_REQUEST++; // 释放一个哀求槽 }); this.MAX_REQUEST--; // 占用一个哀求槽 } }, // 上传单个切片 async uploadChunk(chunk, fileHash, index) { const formData = new FormData(); formData.append("chunk", chunk); formData.append("hash", fileHash); formData.append("index", index); // 替换为真实的上传URL，并根据需要实现onUploadProgress await axios.post("上传URL", formData); }, // 通知服务器合并切片 notifyServerToMerge(fileHash) { // 通知服务器合并切片，应替换为真实的合并API调用 console.log(`通知服务器将文件与哈希合并: ${fileHash}`); }, },};</script>

复制代码