日常开发过程中,经常会遇到需要上传文件的问题,有时候文件会特别的大,这时候需要考虑文件秒传,文件分片上传。 以此来实现高效上传,提升用户体验。本文主要介绍文件秒传。
秒传关键在于计算文件MD5值,前端计算文件MD5值的常用工具为 spark-md5 它能够非常快速的计算大文件的MD5值, 满足开发需求。
import SparkMD5 from 'spark-md5';
/**
* 计算文件Md5
* 将文件分片逐步计算最终合并得出整个文件md5, 提升计算速度
* @param {*} file
*/
export default function computeFileMD5(file) {
return new Promise((resolve, reject) => {
let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
let chunkSize = 2 * 1024 * 1024; // 按照一片 2MB 分片
let chunks = Math.ceil(file.size / chunkSize); // 片数
let currentChunk = 0;
let spark = new SparkMD5.ArrayBuffer();
let fileReader = new FileReader();
fileReader.onload = function (e) {
console.log('read chunk nr', currentChunk + 1, 'of', chunks);
spark.append(e.target.result);
currentChunk++;
console.log('执行进度:'+((currentChunk/chunks)*100)+'%');
if (currentChunk < chunks) {
loadNext();
} else {
console.log('finished loading');
let md5 = spark.end(); //最终md5值
spark.destroy(); //释放缓存
resolve(md5);
}
};
fileReader.onerror = function (e) {
console.warn('oops, something went wrong.');
reject(e);
};
function loadNext() {
let start = currentChunk * chunkSize
let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
})
}