js大文件分片上傳

1. 文件類型的對象有個slice方法，可以對文件進(jìn)行分片。
2. 分片的二進(jìn)制流需要用File對象包裝一下，否則后臺接口拿不到文件名和文件類型，導(dǎo)致接口只返回一個‘blob’的名字，當(dāng)然這種錯誤情況是依接口而定的

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);
              //需要在轉(zhuǎn)換為文件對象
              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).then(arr => {
          console.log('================== all all  ===================', arr)
        })
｝