【vue】vue-simple-uploader 大文件上传

参考地址1：https://github.com/saivarunk/vue-simple-upload
参考地址2：https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html
参考地址3：vue-simple-uploader文档

一、关于vue-simple-uploader

• 支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传
• 可暂停、继续上传
• 错误处理
• 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传”
• 分块上传
• 支持进度、预估剩余时间、出错自动重试、重传等操作

二、安装及使用

• 安装：npm install vue-simple-uploader --save
• 使用：

 import uploader from 'vue-simple-uploader'
 Vue.use(uploader)

三、代码

• template部分

        <uploader
          :key="uploader_key"
          :options="options"
          :autoStart="true"
          @file-success="onFileSuccess"
          @file-added="filesAdded"
          @file-removed="filesRemove"
          style="width: 50%"
        >
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <uploader-btn :single="true" :attrs="attrs">选择文件</uploader-btn>
          </uploader-drop>
          <uploader-list>
            <div
              class="file-panel"
              slot-scope="props"
              :class="{ collapse: collapse }"
            >
              <div class="file-title">
                <p class="file-list-title">文件列表</p>
                <!-- <div class="operate">
              <el-button
                type="text"
                @click="operate"
                :title="collapse ? '折叠':'展开' "
              >
                <i
                  class="icon"
                  :class="collapse ? 'el-icon-caret-bottom': 'el-icon-caret-top'"
                ></i>
              </el-button>
              <el-button
                type="text"
                @click="close"
                title="关闭"
              >
                <i class="icon el-icon-close"></i>
              </el-button>
            </div> -->
              </div>

              <ul
                class="file-list"
                :class="
                  collapse ? 'uploader-list-ul-show' : 'uploader-list-ul-hidden'
                "
              >
                <li v-for="file in props.fileList" :key="file.id">
                  <uploader-file
                    :class="'file_' + file.id"
                    ref="files"
                    :file="file"
                    :list="true"
                  >
                  </uploader-file>
                </li>
              </ul>
            </div>
          </uploader-list>
        </uploader>

• script部分

data(){
	return{
      uploader_key: new Date().getTime(),
      options: {
        target: "/api/chunkUpload", // 上传地址
        testChunks: false, 
        singleFile: true, // 单文件上传
      },
      attrs: {
        accept:
          ".pdf,.zip,.mkv, .mp4,.webm,.ogg" // 支持的格式
      },
	}
},
methods:{
    onFileSuccess: function (rootFile, file, response, chunk) {
      this.filePath = JSON.parse(response).data;
      console.log(JSON.parse(response).data);
    },
    computeMD5(file) {
      const loading = this.$loading({
        lock: true,
        text: "正在计算MD5",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let fileReader = new FileReader();
      let time = new Date().getTime();
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice;
      let currentChunk = 0;
      const chunkSize = 10 * 1024 * 1000;
      let chunks = Math.ceil(file.size / chunkSize);
      let spark = new SparkMD5.ArrayBuffer();
      file.pause();

      loadNext();

      fileReader.onload = (e) => {
        spark.append(e.target.result);
        if (currentChunk < chunks) {
          currentChunk++;
          loadNext();
          this.$nextTick(() => {
            console.log(
              "校验MD5 " + ((currentChunk / chunks) * 100).toFixed(0) + "%"
            );
          });
        } else {
          let md5 = spark.end();
          loading.close();
          this.computeMD5Success(md5, file);
          // console.log(
          //   `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
          //     file.size
          //   } 用时：${new Date().getTime() - time} ms`
          // );
        }
      };
      fileReader.onerror = function () {
        this.$message.error(`文件${file.name}读取出错，请检查该文件`);
        loading.close();
        file.cancel();
      };

      function loadNext() {
        let start = currentChunk * chunkSize;
        let end =
          start + chunkSize >= file.size ? file.size : start + chunkSize;
        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
      }
    },
    computeMD5Success(md5, file) {
      file.uniqueIdentifier = md5; //把md5值作为文件的识别码
      file.resume(); //开始上传
    },
    filesAdded(file, event) {
      this.computeMD5(file);
    },
}

四、文件移除

remove(file,index) {
	const uploaderInstance = this.$refs.uploader.uploader;
	let temp = uploaderInstance.fileList.findIndex(e => e.uniqueIdentifier === file.uniqueIdentifier)
	if(temp > -1) {
		uploaderInstance.fileList[temp].cancel();   //这句代码是删除所选上传文件的关键
	}
}```