vue el-upload 上传文件时 如何分块计算大文件sha256
时间: 2024-01-27 07:43:21 浏览: 90
【JavaScript源代码】vue el-upload上传文件的示例代码.docx
可以使用`spark-md5`库来计算大文件的sha256值,具体步骤如下:
1. 在Vue组件中引入`spark-md5`库
```
import SparkMD5 from 'spark-md5';
```
2. 在上传文件的`before-upload`方法中,进行分块计算文件的sha256值,并存储到一个数组中
```
beforeUpload(file) {
this.sha256List = []; // 存储分块的sha256值
const CHUNK_SIZE = 1024 * 1024 * 10; // 每个分块的大小为10M
const fileSize = file.size; // 文件大小
const chunks = Math.ceil(fileSize / CHUNK_SIZE); // 总共需要分多少块
let currentChunk = 0; // 当前处理的块数
const fileReader = new FileReader();
const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
const chunksFileReader = () => {
const start = currentChunk * CHUNK_SIZE;
const end = start + CHUNK_SIZE >= file.size ? file.size : start + CHUNK_SIZE;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
};
fileReader.onload = (e) => {
const spark = new SparkMD5.ArrayBuffer();
spark.append(e.target.result);
this.sha256List.push(spark.end());
currentChunk++;
if (currentChunk < chunks) {
chunksFileReader();
} else {
console.log(this.sha256List); // 输出每个分块的sha256值
}
};
chunksFileReader();
}
```
3. 将分块的sha256值发送到后端,后端利用这些值进行文件的校验
```
upload() {
// 将分块的sha256值发送到后端
this.$axios.post('/verify', { sha256List: this.sha256List }).then((res) => {
console.log(res.data);
});
}
```
阅读全文