js大文件分片上传

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).then(arr => {
          console.log('================== all all  ===================', arr)
        })
｝

参考文章：http://blog.ncmem.com/wordpress/2023/10/08/js%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/
欢迎入群一起讨论