msyj-admin-org/src/components/common/ImportFile/ImportFile.vue

<template>
  <div :class="prefixCls">
    <Modal
      v-model="modalIsShow"
      :title="title"
      :footer-hide="true"
      :mask-closable="false"
      @on-visible-change="visibleChange"
    >
      <div :class="[`${prefixCls}-body`]">
        <Upload
          type="drag"
          :action="uploadUrl"
          :headers="headers"
          :max-size="maxSize"
          :format="format"
          :accept="accept"
          :data="uploadData"
          :before-upload="handleBeforeUpload"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleExceededSize"
          :on-error="handleError"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          ref="UploadComp"
        >
          <div style="padding: 40px 0">
            <Icon class="upload-icon" type="md-cloud-upload" size="40"></Icon>
            <p>将文件拖到此处，或<em>点击上传</em></p>
          </div>
        </Upload>
        <p
          :class="[
            `${prefixCls}-tips`,
            {
              'cc-tips-success': res.success,
              'cc-tips-error': !res.success
            }
          ]"
          v-if="res.msg"
        >
          {{ res.msg }}
        </p>
      </div>
      <div :class="[`${prefixCls}-footer`]" v-if="downloadUrl">
        文件下载：
        <a :href="downloadUrl" :download="dfilename">{{ dfilename }}</a>
      </div>
    </Modal>
  </div>
</template>

<script>
const prefixCls = "cc-import-file";

export default {
  name: "import-file",
  props: {
    title: {
      type: String,
      default: "文件上传"
    },
    downloadUrl: {
      type: String,
      default: ""
    },
    downloadFilename: String,
    format: {
      type: Array,
      default() {
        return ["jpg", "png"];
      }
    },
    uploadUrl: {
      type: String,
      required: true
    },
    uploadData: {
      type: Object,
      default() {
        return {};
      }
    },
    headers: {
      type: Object,
      default() {
        return {};
      }
    },
    maxSize: {
      type: Number,
      default: 10 * 1024
    },
    addFilenameParam: {
      type: String,
      default: "fileName"
    },
    uploadSuccessHandle: {
      type: Function,
      default(response) {
        return {
          success: true,
          msg: "导入成功！"
        };
      }
    }
  },
  data() {
    return {
      prefixCls,
      modalIsShow: false,
      res: {
        success: true,
        msg: ""
      }
    };
  },
  computed: {
    dfilename() {
      return this.downloadFilename || this.downloadUrl.split("/").pop();
    },
    accept() {
      return this.format.map(el => `.${el}`).join();
    }
  },
  methods: {
    visibleChange(visible) {
      if (!visible) {
        this.res = {
          success: true,
          msg: ""
        };
        this.$refs.UploadComp.clearFiles();
      }
    },
    handleBeforeUpload(file) {
      if (this.addFilenameParam)
        this.uploadData[this.addFilenameParam] = file.name;
      this.$refs.UploadComp.clearFiles();
    },
    handleError(error) {
      this.res = {
        success: false,
        msg: error.message
      };
    },
    handleSuccess(response) {
      if (response) {
        this.res = this.uploadSuccessHandle(response);
        this.$emit("upload-success", response);
      } else {
        this.res = {
          success: false,
          msg: response.message || "上传失败"
        };
      }
    },
    handleFormatError() {
      this.res = {
        success: false,
        msg: "只支持文件格式为" + this.format.join("/")
      };
    },
    handleExceededSize() {
      this.res = {
        success: false,
        msg: "文件大小不能超过" + Math.floor(this.maxSize / 1024) + "M"
      };
    },
    handleRemove() {
      this.resData = "";
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    }
  }
};
</script>