simpleUploader.vue

<template>
  <uploader
    :options="options"
    :file-status-text="statusText"
    :autoStart="false"
    @file-added="fileAdded"
    @file-progress="onFileProgress"
    @file-success="onFileSuccess"
    @file-error="onFileError"
    class="uploader-example"
  >
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>拖拽文件至此或点击</p>
      <uploader-btn>选择文件</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script>
var notUploadedChunks = []; // 已经上传过的文件chunkNumber数组
var isUploaded = false; // 文件已经上传成功了
import { mapGetters } from "vuex";
import { checkFileMd5,mergeFileMd5 } from "@/api/simpleUploader";
import SparkMD5 from "spark-md5";
const path = process.env.VUE_APP_BASE_API;
export default {
  name: "simpleUploader",
  data(){
    return{
      md5:""
    }
  },
  computed: {
    ...mapGetters("user", ["userInfo", "token"]),
    statusText() {
      return {
        success: "成功了",
        error: "出错了",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中"
      };
    },
    options() {
      return {
        target: path + "/simpleUploader/upload",
        testChunks: false,
        simultaneousUploads: 5,
        chunkSize: 2 * 1024 * 1024,
        headers: {
          "x-token": this.token,
          "x-user-id": this.userInfo.ID
        },
        checkChunkUploadedByResponse(chunk) {
          if (isUploaded) {
            return true; // return true 会忽略当前文件，不会再发送给后台
          } else {
              // 根据已经上传过的切片来进行忽略
              return (
                notUploadedChunks &&
                notUploadedChunks.some(
                  item => item.chunkNumber == chunk.offset + 1
                )
              );
          }
        }
      };
    }
  },
  methods: {

    // 上传单个文件
    fileAdded(file) {
      this.computeMD5(file); // 生成MD5
    },
    // 计算MD5值
    computeMD5(file) {
      var that = this;
      isUploaded = false; // 这个文件是否已经上传成功过
      notUploadedChunks = []; // 未成功的chunkNumber
      var fileReader = new FileReader();
      var md5 = "";

      file.pause();

      fileReader.readAsArrayBuffer(file.file);
      fileReader.onload = async function(e) {
        if (file.size != e.target.result.byteLength) {
          this.error(
            "Browser reported success but could not read the file until the end."
          );
          return false;
        }
        md5 = SparkMD5.ArrayBuffer.hash(e.target.result, false);

        file.uniqueIdentifier = md5;
        if (md5 != "") {
          const res = await checkFileMd5({ md5: md5 });
          if (res.code == 0) {
            if (res.data.isDone) {
              // 上传成功过
              isUploaded = true;
              that.$message({
                message: "该文件已经上传成功过了，秒传成功。",
                type: "success"
              });

              file.cancel();
            } else {
              isUploaded = false;
              notUploadedChunks = res.data.chunks;
              if(notUploadedChunks.length){
                file.resume();
              }
            }
          }
        }

        
      };
      fileReader.onerror = function() {
        this.error(
          "generater md5 时FileReader异步读取文件出错了，FileReader onerror was triggered, maybe the browser aborted due to high memory usage."
        );
        return false;
      };
    },
    // 上传进度
    onFileProgress() {},
    // 上传成功
    async onFileSuccess(rootFile, file) {
      await mergeFileMd5({md5:file.uniqueIdentifier,fileName:file.name})
    },
    onFileError(rootFile, file, response) {
      this.$message({
        message: response,
        type: "error"
      });
    }
  }
};
</script>

<style>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 115px 15px 20px;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>