server/portal/src/components/UploadButton.vue

<template>
  <Upload
    :action="uploadUrl"
    :max-size="maxSize"
    :format="format"
    :accept="accept"
    :data="uploadDataDict"
    :before-upload="handleBeforeUpload"
    :on-error="handleError"
    :on-success="handleSuccess"
    :disabled="disabled"
    :show-file-list="false"
    style="display: inline-block; margin: 0 10px"
    ref="UploadComp"
  >
    <Button
      :type="btnType"
      :icon="btnIcon"
      :loading="loading"
      :disabled="disabled"
      >{{ btnContent }}</Button
    >
  </Upload>
</template>

<script>
import { axios } from "@/libs/http";

export default {
  name: "upload-button",
  props: {
    btnIcon: {
      type: String,
    },
    btnType: {
      type: String,
      default: "default",
    },
    btnContent: {
      type: String,
    },
    accept: {
      type: String,
    },
    format: {
      type: Array,
      default() {
        return ["jpg", "jpeg", "png"];
      },
    },
    uploadUrl: {
      type: String,
      required: true,
    },
    uploadData: {
      type: Object,
      default() {
        return {};
      },
    },
    maxSize: {
      type: Number,
      default: 20 * 1024 * 1024,
    },
    addFilenameParam: {
      type: String,
      default: "filename",
    },
    disabled: { type: Boolean, default: false },
  },
  data() {
    return {
      res: {},
      loading: false,
      uploadDataDict: {},
      file: null,
    };
  },
  methods: {
    checkFileFormat(fileType) {
      const _file_format = fileType.split(".").pop().toLocaleLowerCase();
      return this.format.length
        ? this.format.some((item) => item.toLocaleLowerCase() === _file_format)
        : true;
    },
    handleBeforeUpload(file) {
      this.uploadDataDict = {
        ...this.uploadData,
      };
      this.uploadDataDict[this.addFilenameParam] = file.name;

      if (file.size > this.maxSize) {
        this.handleExceededSize();
        return false;
      }

      if (!this.checkFileFormat(file.name)) {
        this.handleFormatError();
        return false;
      }

      this.file = file;
      this.loading = true;
      this.upload();
      return false;
    },
    async upload() {
      let formData = new FormData();
      Object.entries(this.uploadDataDict).forEach(([k, v]) => {
        formData.append(k, v);
      });
      formData.append("file", this.file);
      this.$emit("uploading");

      const res = await axios.post(this.uploadUrl, formData).catch((e) => {
        this.handleError(e);
      });
      if (!res) return;
      this.handleSuccess(res.data);
    },
    handleError(error) {
      this.loading = false;
      this.res = {
        success: false,
        message: error.message || "上传错误",
      };
      this.$emit("upload-error", error);
    },
    handleSuccess(responseData) {
      this.loading = false;
      this.res = {
        success: true,
        message: "导入成功！",
      };
      this.$emit("upload-success", {
        data: responseData,
        filename: this.uploadDataDict[this.addFilenameParam],
      });
    },
    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>