实现步骤

1、判断待上传文件是否存在库里

使用fileReader + spark-md5 获取文件的md5码

（MD5是文件签名，相当于我们的身份证 独一无二的 ， https://baike.baidu.com/item/MD5/212708?fr=aladdin#3）

• 安装 sparkMD5 

  npm i spark MD5

• vue文件中引入

  import SparkMD5 from 'spark-md5'

• 使用

   handlePrepareUpload() {
       var file = this.fileList[0]
       const fileSize = file.size; // 文件大小
        const chunkSize = 1024 * 1024 * 10; // 切片的大小
        const chunks = Math.ceil(fileSize / chunkSize); // 获取切片个数
        const fileReader = new FileReader();
        const spark = new SparkMD5.ArrayBuffer();
       const bolbSlice = File.prototype.slice ||   File.prototype.mozSlice ||
            File.prototype.webkitSlice;
     let currentChunk = 0;
     fileReader.onload = e => {
           const res = e.target.result;
           spark.append(res);
           currentChunk++;
           if (currentChunk < chunks) {
                loadNext();
                console.log(`第${currentChunk}分片解析完成, 开始第${currentChunk +1}分片解析`);
           } else {
              const md5 = spark.end();
             console.log('解析完成');
              alert(md5)
         }
      };
  
          const loadNext = () => {
          const start = currentChunk * chunkSize;
          const end =
               start + chunkSize > file.size ? file.size : start + chunkSize;
            fileReader.readAsArrayBuffer(bolbSlice.call(file, start, end));
         };
         loadNext();
     },

调用后端查询接口查询文件是否已存在。如果不存在，进行文件分片上传。

注意点:

• 读取每一个文件前，spark和fileReader都需要重新new一个。否则会报错
• fileReader.readAsArrayBuffer（）读出来的文件类型是ArrayBuffer格式的，而接口需要的是File格式。此处需要转换

        let file = new window.File([new Blob([res])],  file.name,{type: file.type});

• 组合入参，调用接口。接口404，是因为接口需要的是formData，而404的原因是   入参是个对象。