vue 大文件分片上传

<template>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'YunShuBigFileUpload',
    props: {
      fileId: { // 上传 type="file"的id
        type: String
      },
      UploadComplete: { // 完成时执行函数
        type: Function
      },
      ChunkSize: { // 切片大小  单位时MB
        type: Number
      },
      url: { //上传地址
        type: String
      },
      md5: { // 文件的md5值
        type: String
      },
      UploadProgress: { // 上传进度
        type: Function
      }
    },
    watch: {
      md5() {
        this.myMd5 = this.md5
      }
    },
    data() {
      return {
        uploadFile: {
          chunk: 0,
          isLastChunk: false,//是否最后一片文件
          fileName: ''//文件名称
        },
        myMd5: '',
      }
    },
    created() {
      this.myMd5 = this.md5
    },
    methods: {
      chunksFile() {
        // this.fileId : '上传的input元素id'   例如 #input-file-upload
        let file = document.querySelector(this.fileId).files[0], //需要上传的文件
          chunkLength = 0; //文件分片后的长度
        this.uploadFile.fileName = file.name;
        if (file.size > 1024 * 1024 * this.ChunkSize) {
          chunkLength = Math.ceil(file.size / (1024 * 1024 * this.ChunkSize));
        } else {
          chunkLength = 1
        }
        this.uploadFile.chunk === chunkLength - 1 ? this.uploadFile.isLastChunk = true : false;
        let fm = new FormData();
        fm.append('md5', this.myMd5);
        fm.append('size', file.size);
        fm.append('chunk', this.uploadFile.chunk);
        fm.append('chunks ', chunkLength);
        fm.append('fileName ', this.uploadFile.fileName);
        fm.append('file', file.slice(this.uploadFile.chunk * 1024 * 1024 * this.ChunkSize, (this.uploadFile.chunk + 1) * 1024 * 1024 * this.ChunkSize));
        //通过ajax上传分片文件内容
        axios.post(this.url, fm).then((res) => {
          if (res.status == 200) {
            //上传成功，分片加一，上传下一片文件
            this.uploadFile.chunk++
            //上传完最后一片后传输结束
            const pr = parseInt((this.uploadFile.chunk + 1) / chunkLength * 100)
            this.UploadProgress(pr)
            if (this.uploadFile.isLastChunk) {
              this.UploadComplete()
            } else {
              //递归调用上传下一片
              this.chunksFile();
            }
          }
        }).catch((error) => {
          console.log(error)
            this.$Message.warning('上传失败!')
        });
      }
    }
  }
</script>

<style>
</style>

需要和下一篇的《根据文件内容生成md5》配合使用

打工者联盟为了抵抗996、拖欠工资、黑心老板、恶心公司，让我们组成打工者联盟。客观评价自己任职过的公司情况，为其他求职者竖起一座引路的明灯。https://book.employleague.cn/