增加了断点续传插件版 保留原始版本供学习原理使用

web/src/view/example/simpleUploader/simpleUploader.vue

@@ -0,0 +1,163 @@
+<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: 40px auto 0;
+  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>