msyj-admin-org/src/components/UploadButton.vue

<template>
  <div :class="prefixCls">
    <Upload
      :action="uploadUrl"
      :headers="headers"
      :max-size="maxSize"
      :format="format"
      :accept="accept"
      :data="uploadDataDict"
      :before-upload="handleBeforeUpload"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleExceededSize"
      :on-error="handleError"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :show-upload-list="false"
      ref="UploadComp"
    >
      <Button
        shape="circle"
        :type="btnType"
        :icon="btnIcon"
        :loading="loading"
        >{{ btnContent }}</Button
      >
    </Upload>
    <slot name="extra"></slot>
    <p
      :class="[
        {
          'cc-tips-success': res.success,
          'cc-tips-error': !res.success
        }
      ]"
      v-if="res.msg && !res.success"
    >
      {{ res.msg }}
    </p>
  </div>
</template>

<script>
import { fileMD5 } from "../plugins/md5";
const prefixCls = "cc-upload-button";

export default {
  name: "upload-button",
  props: {
    btnIcon: {
      type: String
    },
    btnType: {
      type: String,
      default: "default"
    },
    btnContent: {
      type: String,
      default: "上传文件"
    },
    format: {
      type: Array,
      default() {
        return ["jpg", "png"];
      }
    },
    uploadUrl: {
      type: String,
      required: true
    },
    uploadData: {
      type: Object,
      default() {
        return {};
      }
    },
    maxSize: {
      type: Number,
      default: 10 * 1024
    },
    addFilenameParam: {
      type: String,
      default: "fileName"
    },
    autoUpload: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      prefixCls,
      modalIsShow: false,
      loading: false,
      headers: { md5: "" },
      uploadDataDict: {},
      file: null,
      res: {
        success: true,
        msg: ""
      }
    };
  },
  computed: {
    accept() {
      return this.format.map(el => `.${el}`).join();
    }
  },
  methods: {
    visibleChange(visible) {
      if (!visible) {
        this.res = {
          success: true,
          msg: ""
        };
        this.$refs.UploadComp.clearFiles();
      }
    },
    startUpload() {
      if (this.file) {
        this.loading = true;
        this.$refs.UploadComp.post(this.file);
      }
    },
    async handleBeforeUpload(file) {
      const md5 = await fileMD5(file);
      this.headers.md5 = md5;
      this.uploadDataDict = { ...this.uploadData, md5 };
      if (this.addFilenameParam)
        this.uploadDataDict[this.addFilenameParam] = file.name;
      this.res = {
        success: true,
        msg: ""
      };
      this.$emit("file-change", file);

      if (!this.autoUpload) {
        this.file = file;
        return Promise.reject();
      }

      this.loading = true;
      this.$refs.UploadComp.clearFiles();
    },
    handleError(error, response) {
      this.loading = false;
      this.res = {
        success: false,
        msg: response.message
      };
    },
    handleSuccess(response) {
      this.loading = false;
      this.res = {
        success: true,
        msg: "上传成功！"
      };
      this.$emit("upload-success", response);
    },
    handleFormatError() {
      this.res = {
        success: false,
        msg: "只支持文件格式为" + this.format.join("/")
      };
      this.loading = false;
    },
    handleExceededSize() {
      this.res = {
        success: false,
        msg: "文件大小不能超过" + Math.floor(this.maxSize / 1024) + "M"
      };
      this.loading = false;
    },
    handleRemove() {
      this.resData = "";
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    }
  }
};
</script>