<template>
<div>
<input type="file" @change="getFile" />
<button @click="upload">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null,
fileChunk: [],
chunkSize: 1024 * 1024, // 每个分片的大小，这里以1MB为例
chunkCount: 0, // 分片总数
uploadedCount: 0, // 已上传的分片数
};
},
methods: {
getFile(e) {
this.file = e.target.files[0];
this.getFileMd5(this.file).then(md5 => {
console.log('文件MD5:', md5);
});
},
getFileMd5(file) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = e => {
const binary = e.target.result;
const md5 = SparkMD5.ArrayBuffer.hash(binary);
resolve(md5);
};
fileReader.onerror = e => reject(e);
fileReader.readAsArrayBuffer(file.slice(0, 1024 * 1024)); // 只读取文件的一个分片计算MD5
});
},
// 分割文件
splitFile(file) {
const chunkCount = Math.ceil(file.size / this.chunkSize);
for (let i = 0; i < chunkCount; i++) {
const chunk = file.slice(i * this.chunkSize, (i + 1) * this.chunkSize);
this.fileChunk.push(chunk);
}
this.chunkCount = chunkCount;
},
// 上传文件
upload() {
if (!this.file) {
alert('请选择文件');
return;
}
this.splitFile(this.file); // 分割文件
this.uploadNextChunk(); // 上传下一个分片
},
uploadNextChunk() {
if (this.uploadedCount >= this.chunkCount) {
alert('所有分片上传完毕');
return;
}
const formData = new FormData();
formData.append('file', this.fileChunk[this.uploadedCount]);
// 这里使用axios进行文件上传，你可以根据实际情况使用其他HTTP库
axios.post('/upload', formData, {
onUploadProgress: progressEvent => {
// 这里可以获取上传进度
console.log('上传进度:', (this.uploadedCount + progressEvent.loaded / progressEvent.total) / this.chunkCount);
}
}).then(response => {
// 上传成功后的处理逻辑
console.log('上传成功', response.data);
this.uploadedCount++;
this.uploadNextChunk(); // 递归上传下一个分片
}).catch(error => {
// 上传失败的处理逻辑
console.error('上传失败', error);
});
}
}
};
</script>这段代码展示了如何在Vue中实现大文件分片上传的基本逻辑。它首先通过文件输入元素获取用户选择的文件，然后计算该文件的MD5值以验证文件的唯一性。接着，它将文件分割成多个分片，并提供了一个上传函数，该函数递归地上传每个分片，直至所有分片上传完毕。在上传过程