student-client/src/features/OfflineExam/OfflineExamUpload.vue

<template>
  <div>
    <Upload :headers="headers" :data="{fileType: fileType}" :before-upload="handleBeforeUpload" :action="'/api/ecs_oe_student/offlineExam/submitPaper?examRecordDataId='+course.examRecordDataId" :max-size="1024*30" :format="['pdf','zip']" accept="application/zip,application/pdf" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :on-success="handleSuccess" :on-error="handleError" :show-upload-list="false">
      <Button icon="ios-cloud-upload-outline" class="qm-primary-button" style="width: 100%;">上传作答</Button>
    </Upload>
    <div v-if="file !== null">待上传文件: {{ file.name }}
      <Button :loading="loadingStatus">{{ loadingStatus ? '上传中...' : '上传' }}</Button>
    </div>
  </div>
</template>

<script>
export default {
  name: "EcsOfflineUpload",
  data() {
    return {
      headers: {
        token: window.localStorage.getItem("token"),
        key: window.localStorage.getItem("key")
      },
      file: null,
      fileType: null,
      loadingStatus: false
    };
  },
  props: {
    course: Object
  },
  methods: {
    fileFormatCheck(file, resolve, reject) {
      function getMimetype(signature) {
        switch (signature) {
          case "89504E47":
            return "image/png";
          case "47494638":
            return "image/gif";
          case "25504446":
            return "application/pdf";
          case "FFD8FFDB":
          case "FFD8FFE0":
          case "FFD8FFE1":
            return "image/jpeg";
          case "504B0304":
            return "application/zip";
          case "504B34":
            return "application/zip";
          default:
            return "Unknown filetype";
        }
      }

      const filereader = new FileReader();
      let uploads = [];
      filereader.onloadend = evt => {
        if (evt.target.readyState === FileReader.DONE) {
          const uint = new Uint8Array(evt.target.result);
          let bytes = [];
          uint.forEach(byte => {
            bytes.push(byte.toString(16));
          });
          const hex = bytes.join("").toUpperCase();
          uploads.push({
            filename: file.name,
            filetype: file.type ? file.type : "Unknown/Extension missing",
            binaryFileType: getMimetype(hex),
            hex: hex
          });

          if (
            ["application/zip", "application/pdf"].includes(getMimetype(hex))
          ) {
            resolve();
          } else {
            console.log("binary file type check: not zip or pdf");
            this.$Notice.warning({
              title: "作答文件损坏",
              desc: file.name + " 文件无法以 .zip 或 .pdf 读取。"
            });
            this.file = null;
            this.loadingStatus = false;
            reject();
          }
        }
      };
      const blob = file.slice(0, 4);
      filereader.readAsArrayBuffer(blob);
    },
    handleSuccess() {
      this.file = null;
      this.loadingStatus = false;
      this.$Message.success("上传成功");
      this.$emit("reloadList");
    },
    handleError() {
      this.file = null;
      this.loadingStatus = false;
      this.$Message.error("上传失败");
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "作答文件格式不对",
        desc: file.name + " 文件格式不对，请选择 .zip 或 .pdf 文件。"
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "超出文件大小限制",
        desc: file.name + " 太大，作答文件不能超过30M."
      });
    },
    handleBeforeUpload(file) {
      if (file.type.includes("/pdf")) {
        this.fileType = "pdf";
      } else if (file.type.includes("/zip")) {
        this.fileType = "zip";
      }
      this.file = file;
      this.loadingStatus = true;
      return new Promise((resolve, reject) =>
        this.fileFormatCheck(file, resolve, reject)
      );
    }
  }
};
</script>

<style lang="postcss">
.list .ivu-upload-select {
  width: 100%;
}
</style>