1.文件类型的对象有个slice方法,可以对文件进行分片。
2.分片的二进制流需要用File对象包装一下,否则后台接口拿不到文件名和文件类型,导致接口只返回一个‘blob’的名字,当然这种错误情况是依接口而定的
let maxSize = 20; // 20M以上的文件定义为大文件
let onePice = 3; // 3M
if (file.size < maxSize * 1000 * 1024) {
// 小文件普通上传接口
} else {
// 大文件 分片
let promiseArr = [];
console.log('文件超过200M');
let pieceSize = onePice * 1000 * 1024;
let fileSize = file.size;
let chunkIndex = 0;
let chunkNums = Math.ceil(fileSize / pieceSize);
let fileMd5 = md5(file.name + file.size + file.ext);
for(let i = 0; i < fileSize; i = i + pieceSize) {
promiseArr.push(
new Promise((resolve, reject) => {
let chunk = file.slice(i, i + pieceSize);
//需要在转换为文件对象
let boldFile = new File([chunk], file.name);
let formData = new FormData();
formData.append("isNeedChunk", 1);
formData.append("file", boldFile);
// 分片上传第几个子文件,从0开始
formData.append("chunk", chunkIndex);
// 分片上传一共多少个子文件
formData.append("chunks", chunkNums);
// md5
formData.append("fileMd5", fileMd5);
PersonalHttpS.bigFileUpload(formData).then((res) => {
this.loading = false;
this.show = false;
resolve(res.data)
}).catch((err) => {
console.log('2222222', err)
if (err && err.code === '99000') {
// 分片成功
resolve(err)
} else {
this.$message.error(err);
this.loading = false;
resolve(0)
}
});
}) // end new promise
);// end arr.push
chunkIndex++
}
Promise.all(promiseArr)