vue实现大文件分片上传

这里使用了element ui的文件上传插件

      <div class="inputTitle">人员资料</div>
      <div class="uploadBox">
        <div class="picture">
          <img src="@/assets/images/zip-before.png">
        </div>
        <el-upload :show-file-list="false" accept=".zip" :limit="1" action class="mirror-upload" :http-request="putinMirror" :auto-upload="false" ref="upload">
          <el-button type="primary">上传人员资料</el-button>
        </el-upload>
        <div class="fileType">仅支持zip压缩包文件</div>
      </div>
      <div style="width:75%;margin: 20px auto;">
        <el-progress :percentage="progress" :indeterminate="true" />
      </div>
      <div class="dialog-footer" v-if="showbtn">
        <el-button type="primary" @click="commitFile">确定</el-button>
        <el-button @click="closeInput">取消</el-button>
      </div> 

定义全局的字段

  data () {
    return {
      showbtn:true,
      progress:0,//进度条
    }
  },

js代码部分

commitFile(){
      this.$refs.upload.submit();
    },
    closeInput(){
      this.progress = 0;
      this.importDialog = false;
    },
    async putinMirror(file){
      // 每个文件切片大小定为5MB
      var sliceSize = 0.5 * 1024 * 1024;
      //文件大小限制为最大1个G，可根据需求修改
      var filesizes  = 1 * 1024 * 1024 * 1024;
      let that = this;
      const blob = file.file;
      const fileSize = blob.size;// 文件大小
      const fileName = blob.name;// 文件名
      //计算文件切片总数
      const totalSlice = Math.ceil(fileSize / sliceSize);
      if(fileSize <= filesizes){
        that.showbtn = false;
        // 循环上传
        for (let i = 0; i < totalSlice; i++) {
            let start = i * sliceSize;
            let chunk = blob.slice(start, Math.min(fileSize, start + sliceSize));
            const formData = new FormData();
            formData.append("file", chunk);
            formData.append("signal", blob.uid);
            formData.append("name", fileName);
            formData.append("size", fileSize);
            formData.append("chunks", totalSlice);
            formData.append("chunk", i+1);
            let res = await uploadExcleAndZip(2,formData);//一个分片上传完成后再调用接口上传下一片
            console.log(res);
            if(res.errCode == 0){
              this.progress = ((i+1)/totalSlice).toFixed(1) * 100;//控制进度条
              setTimeout(function() {
                if((i+1) == totalSlice){
                    that.$message({
                      message: '上传成功',
                      type: 'success'
                    });
                    that.showbtn = true;
                    that.closeInput();
                    that.getTreeData();
                  }
              }, 1000);
            }else {
              that.$message({
                message: '上传失败',
                type: 'error'
              });
            }
        }
      }else{
        that.showbtn = true;
        that.$message({
          message: '文件大小超出1G',
          type: 'error'
        });
      }
    },

 

 

参考文章：http://blog.ncmem.com/wordpress/2023/12/08/vue%e5%ae%9e%e7%8e%b0%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论