union-question-web/src/components/UploadButton.vue

<template>
  <div>
    <!-- <el-input
      v-if="!autoUpload"
      :style="{ width: inputWidth, marginRight: '10px' }"
      v-model.trim="filename"
      placeholder="文件名称"
      readonly
    ></el-input> -->
    <el-upload
      :action="uploadUrl"
      :headers="headers"
      :max-size="maxSize"
      :format="format"
      :accept="accept"
      :data="uploadDataDict"
      :on-error="handleError"
      :on-success="handleSuccess"
      :on-change="fileChange"
      :http-request="upload"
      :disabled="disabled || loading"
      :auto-upload="autoUpload"
      :show-file-list="false"
      style="display: inline-block"
      ref="UploadComp"
    >
      <el-button
        :type="btnType"
        :icon="btnIcon"
        :loading="loading"
        :disabled="disabled || loading"
        >{{ btnContent }}</el-button
      >
    </el-upload>
  </div>
</template>

<script>
import { fileMD5 } from "@/plugins/md5";
import { $httpWithMsg } from "@/plugins/axios";

export default {
  name: "UploadButton",
  props: {
    inputWidth: {
      type: String,
      default: "203px",
    },
    btnIcon: {
      type: String,
    },
    btnType: {
      type: String,
      default: "default",
    },
    btnContent: {
      type: String,
    },
    accept: {
      type: String,
    },
    format: {
      type: Array,
      default() {
        return ["xlsx", "xls"];
      },
    },
    uploadUrl: {
      type: String,
      required: true,
    },
    uploadData: {
      type: Object,
      default() {
        return {};
      },
    },
    maxSize: {
      type: Number,
      default: 20 * 1024 * 1024,
    },
    addFileParam: {
      type: String,
      default: "file",
    },
    addFilenameParam: {
      type: String,
      default: "filename",
    },
    autoUpload: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
  },
  data() {
    return {
      headers: {
        md5: "",
      },
      res: {},
      loading: false,
      uploadDataDict: {},
      filename: "",
      fileValid: false,
    };
  },
  methods: {
    checkFileFormat(fileType) {
      const _file_format = fileType.split(".").pop().toLocaleLowerCase();
      return this.format.length
        ? this.format.some((item) => item.toLocaleLowerCase() === _file_format)
        : false;
    },
    async fileChange(fileObj, fileList) {
      if (fileObj.status === "ready") {
        if (fileList.length > 1) {
          fileList[0] = fileList[1];
          fileList.splice(1, 1);
        }
        let res = await this.handleBeforeUpload(fileObj.raw).catch(() => {});
        if (res) {
          this.submit();
        }
      }
    },
    async handleBeforeUpload(file) {
      this.res = {};
      this.filename = file.name;
      this.uploadDataDict = {
        ...this.uploadData,
      };
      this.uploadDataDict[this.addFilenameParam] = file.name;

      if (!this.checkFileFormat(file.name)) {
        this.handleFormatError();
        this.fileValid = false;
        // return Promise.reject();
        return false;
      }

      if (file.size > this.maxSize) {
        this.handleExceededSize();
        this.fileValid = false;
        // return Promise.reject();
        return false;
      }
      const md5 = await fileMD5(file);
      this.headers["md5"] = md5;
      this.fileValid = true;

      if (this.autoUpload) {
        this.loading = true;
        return true;
      }

      return true;
    },
    submit() {
      if (!this.fileValid) {
        this.$message.error("文件错误，请重新选择文件！");
        return;
      }
      this.loading = true;
      this.$refs.UploadComp.submit();
    },
    upload(options) {
      if (!options.file) return Promise.reject("文件丢失");

      let formData = new FormData();
      Object.entries(options.data).forEach(([k, v]) => {
        formData.append(k, v);
      });
      formData.append(this.addFileParam, options.file);
      this.$emit("uploading");

      return $httpWithMsg.post(options.action, formData, {
        headers: options.headers,
      });
    },
    handleError(error) {
      this.loading = false;
      this.res = {
        success: false,
        message: error.response.data.message,
      };
      this.uploadDataDict = {};
      this.filename = "";
      this.fileValid = false;
      this.$refs.UploadComp.clearFiles();
      this.$emit("upload-error", error.response);
    },
    handleSuccess(res) {
      this.loading = false;
      this.res = {
        success: true,
        message: "导入成功！",
      };
      this.$emit("upload-success", res);
    },
    handleFormatError() {
      const content = "只支持文件格式为" + this.format.join("/");
      this.res = {
        success: false,
        message: content,
      };
      this.$emit("valid-error", this.res);
    },
    handleExceededSize() {
      const content =
        "文件大小不能超过" + Math.floor(this.maxSize / (1024 * 1024)) + "M";
      this.res = {
        success: false,
        message: content,
      };
      this.$emit("valid-error", this.res);
    },
  },
};
</script>