element 之 el-upload 上传(导入)组件封装(无错误文件下载&查看)

子组件

<template>
  <el-dialog
    width="400px"
    top="25vh"
    :title="title"
    :visible.sync="showDialog"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="close"
  >
    <!--文件上传入口-->
    <el-upload
      ref="upload"
      class="upload-demo"
      v-loading="operating"
      :http-request="uploadDetailMain"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :limit="1"
      :on-exceed="handleExceed"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击选择文件</em></div>
      <div slot="tip" class="el-upload__tip">
        <span>仅允许导入xls、xlsx格式文件</span>

        <el-link class="link-download" v-if="exampleFile" type="primary" :underline="false" @click="downloadExample">
          点击下载导入模板
        </el-link>
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
const BASE_API = window.ENV_CONFIG.BASE_API;

export default {
  name: 'UploadFile',
  props: {
    title: {
      type:String,
      default: '导入',
    },
    // 模板下载地址
    exampleFile: {
      type: String,
      default: '',
    },
    //导入接口
    importURL: {
      type: String,
      default: '',
    },
    //额外携带的参数
    extraData: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      showDialog: false,
      operating: false,
      uploadData: [],
    };
  },
  methods: {
    // 打开弹窗
    openDialog() {
      this.showDialog = true;
    },
    // 关闭弹窗
    close() {
      this.$refs.upload.clearFiles();
      this.showDialog = false;
    },
    //模版下载
    downloadExample() {
      const { exampleFile } = this;
      if (!exampleFile) return this.$message.error('模板下载地址为空');
      const url = '模版下载地址';
      window.open(url);
    },
    //文件上传前校验
    beforeUpload(file) {
      const extension = file.name.split('.').pop().toLowerCase();
      const allowedExtensions = ['xlsx', 'xls'];
      if (!allowedExtensions.includes(extension)) {
        this.$message.error('暂时不支持该类文件上传');
        return false;
      }
      return this.checkOtherFile(file);
    },
    checkOtherFile(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error(`上传文件大小不能超过10MB!`);
        return false;
      }
      return true;
    },
    //文件上传
    uploadDetailMain(file) {
      this.operating = true;
      let formData = new FormData();
      formData.append('file', file.file);
      //格式化额外携带的参数
      if (this.extraData) {
        for (let key in this.extraData) {
          if (this.extraData.hasOwnProperty(key)) {
            formData.append(key, this.extraData[key]);
          }
        }
      }
      this.$http({
        url: this.importURL,
        method: 'post',
        headers: {
          'Content-type': 'multipart/form-data',
        },
        data: formData,
      })
        .then((res) => {
          this.uploadData = res.content;
          this.$message.success('导入成功');
        })
        .catch((err) => {
          this.$message.error(err.message);
        })
        .then(() => (this.operating = false));
    },
    handleExceed() {
      this.$message.error('只支持单个文件上传');
    },
    confirm() {
      this.$emit('callback', this.uploadData);
      this.showDialog = false;
    },
  },
};
</script>

<style scoped>
.tips {
  color: #409eff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -150px;
}
.upload-box ::v-deep .el-upload-dragger {
  background: #fcfcfc;
}
.link-download {
  font-size: 12px;
  vertical-align: top;
  margin-left: 10px;
}
</style>

父组件使用

额外补充一下 extraData 必须是对象

    <UploadFile
      ref="uploadFile"
      :exampleFile="exampleFile"
      :extraData="extraData"
      :importURL="importURL"
      @callback="uploaderChange"
    />