Vue-Excel（Excel导入）

<!-- Excel表格导入/上传组件，滑到底部可查看详细说明，-->
<template>
  <div class="ImportExcel">
    <el-form>
      <el-upload
        action=""
        :accept="excelObjData.accept"
        :limit="excelObjData.limit"
        :show-file-list="excelObjData.isShowList"
        :before-upload="beforeUpload"
      >
        <div v-if="excelObjData.isButtonDefault">
          <el-button>{{ excelObjData.buttonText }}</el-button>
        </div>
        <div v-else>
          <!-- 插槽 -->
          <slot></slot>
        </div>
      </el-upload>
    </el-form>
  </div>
</template>

<script>
import commonHttp from '@api/modules/common/commonApi'
const commonApi = new commonHttp()

export default {
  props: {
    excelObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      excelObjData: {
        accept: "",
        method: "",
        size: "",
        isButtonDefault: "",
        buttonText: "",
      },
    };
  },
  methods: {
    beforeUpload(file) {
      // 上传前 文件校验
      let acceptArr = this.excelObjData.accept.split(",");
      let fileXls = file.name.slice(-4) == '.xls' ? file.name.slice(-4) : file.name.slice(-5)
      // 文件大小
      let fileSize = file.size / 1024 / 1024;
      if (acceptArr.indexOf(fileXls) == -1) {
        this.$message.warning(`上传文件只能是 ${this.excelObjData.accept} 格式!`)
        return false
      }
      if (!(fileSize < this.excelObjData.size)) {
        this.$message.warning(
          `上传文件大小不能超过 ${this.excelObjData.size}MB!`
        );
        return false;
      }
      this.excelObjData.file = file;
      this.excelObjData.fileSize = fileSize;
      this.excelObjData.fileName = file.name;
      this.submitUpload();
    },
    submitUpload() {
      // 确认上传
      let fileFormData = new FormData();
      fileFormData.append(
        "file",
        this.excelObjData.file,
        this.excelObjData.fileName
      ); 
      commonApi.getImportExcel({
        headers: {
          "Content-Type": "multipart/form-data"
        },
        method: this.excelObjData.method,
        url: `${this.excelObjData.url}`,
        data: fileFormData,
        params: this.excelObjData.params
      }).then((res) => {
        this.$emit("excelChange", {
          ...this.excelObjData,
          res: {
            ...res,
          },
        });
      })
      // 上传的文件
    },
    changeData(newVal) {
      if (!newVal.accept) {
        this.excelObjData.accept = ".xls,.xlsx";
      }
      if (!newVal.method) {
        this.excelObjData.method = "post";
      }
      if (!newVal.size) {
        this.excelObjData.size = 5;
      }
      if (!newVal.limit) {
        this.excelObjData.limit = 1;
      }
      if (newVal.isShowList === undefined) {
        this.excelObjData.isShowList = false;
      }
      if (!newVal.url) {
        this.$message.warning("API不能为空，请设置excelObj.url的值！");
      }
      if (!newVal.params) {
        this.excelObjData.params = {}
      }
      if (!newVal.buttonDefault === false) {
        this.excelObjData.isButtonDefault = true;
        if (!this.excelObjData.buttonText) {
          this.excelObjData.buttonText = "选取文件";
        }
      }
    },
  },
  watch: {
    excelObj: {
      handler(newVal) {
        this.excelObjData = newVal;
        this.changeData(newVal);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang='scss' scoped>
/*
        此Excel表格导入/上传组件使用说明：小熊
        1、使用方式：
            引入：
                import ImportExcel from '@components/common/ImportExcel'
            使用：
                <ImportExcel :excelObj="excelObj" @excelChange="excelChange">
                    // 插槽
                </ImportExcel>
            必传字段：
                excelObj: {
                    url: '',     // 导入/上传Excel表格的接口api
                }
        ————————————————————————————————————————————————————以上几步即可简单使用
        2、参数说明
            excelObj: {
                accept: '',     // 文件类型，默认 '.xls,.xlsx'（非）,
                url: '',        // Excel表格导入/上传的接口api，如：'distribution/rebate/list'（必）
                method: '',     // api请求方式，默认 post（推荐 post请求方式）（非）
        params: {},     // 上传时传给后台的参数（非）
                size: '',       // Excel表格文件大小限制，默认 5 （注：单位 MB）（非）
        limit: 1,        // 文件上传数量，默认 1（非）
        isShowList: false, // 文件是否展示为列表，默认 false（非）
                isButtonDefault: true, // 是否使用默认Excel表格导入/上传按钮，默认true，（注：isButtonDefault: false 时则使用插槽）（非）
                buttonText: '', // 上传按钮文案，默认 '选取文件'（注：若传该参数，会默认isButtonDefault: true）（非）
            }
        3、事件
            @excelChange：上传成功后事件
                参数：
                {
                    file: 导入/上传Excel文件的信息，
                    fileSize: 导入/上传Excel文件大小，单位：MB
                    fileName：导入/上传Excel文件名称
                    .....
                }
        4、示例
            全局文件中搜索 @components/common/ImportExcel，可查看更多具体示例
        5、使用的插件
            npm i element-ui -S
    */
</style>

// 公共接口
import Http from '../Http'

export default class commonApi extends Http {
  constructor() {
    super()
  }
  getImportExcel(opts = {}) { // Excel表格导入
    if (opts.method == 'post') {
      return this.post(opts.url, opts.data, {
        headers: opts.headers,
        params: opts.params
      }).then(data => {
        return data.data
      })
    } else {
      return this.get(opts.url, {
        headers: opts.headers,
        params: opts.params
      }).then(data => {
        return data.data
      })
    }
  }
}