vue-execl文件上传

<template>
  <div class="upload">
    <el-dialog title="导入" :visible.sync="importDialogVisible" width="50%" @close="closeDia">
      <el-upload
        ref="upload"
        name="file"
        :limit="limit"
        :auto-upload="false"
        action="接口地址"
        :on-remove="removeFile"
        :on-exceed="handleExceed"
        :file-list="filelist"
        :on-change="handleChansge"
      >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px" size="small" type="success" @click="postfile" :disabled="btn.disable">{{
          btn.message
        }}</el-button>
        <div slot="tip" class="el-upload__tip">上传文件只能为excel文件，且为xlsx格式</div>
      </el-upload>
      <div v-for="o in errmesg" :key="o.message" class="text item">{{ o.message }}</div>
    </el-dialog>
  </div>
</template>

<script>
import { 接口 } from '@/api/index';
export default {
  props: {
    importDialogVis: {
      type: Boolean,
      default: function () {
        return false;
      }
    },
    datadate: '',
    type: ''
  },
  data() {
    return {
      importDialogVisible: this.importDialogVis,
      //文件
      file: '',
      filename: '',
      limit: 1,
      filelist: [],
      errmesg: [],
      btn: {
        disable: false,
        message: '上传服务器'
      },
      dataDate: this.datadate,
      uploadType: this.type
    };
  },
  watch: {
    importDialogVis: {
      immediate: true,
      handler(importDialogVis) {
        this.importDialogVisible = importDialogVis;
      }
    },
    datadate: {
      immediate: true,
      handler(datadate) {
        this.dataDate = datadate;
      }
    },
    type: {
      immediate: true,
      handler(type) {
        this.uploadType = type;
      }
    }
  },
  methods: {
    closeDia() {
      this.$emit('closeDia');
      // if (!this.btn.disable) {
      //   this.$refs.upload.clearFiles();
      // }
    },
    /**
     * @description: 文件数量限制
     * @param {type}
     * @return:
     */
    handleExceed(e) {
      // 判断是否只能上传一个文件，超过提示报错
      console.log(e);
      this.$message.error({
        message: '只能上传一个文件哦'
      });
    },
    removeFile(file, fileList) {
      this.file = '';
    },
    //文件上传判断
    handleChansge(file, fileList) {
      console.log(file);
      if (!/\.(xlsx|XLSX)$/.test(file.name)) {
        this.$message.error({
          message: '上传文件只能为excel文件，且为xlsx格式'
        });
        this.filelist = [];
        this.file = '';
        return false;
      } else if (file.size / 1024 / 1024 > 1) {
        this.$message({
          message: '上传文件大小不能超过 1MB!',
          type: 'error',
          duration: 2000
        });
        return false;
      }
      this.file = file.raw;
      this.filename = file.name;
    },
    postfile() {
      let that = this;
      if (that.file == '') {
        that.$message.error({
          message: '上传文件不能为空'
        });
        return false;
      } else {
        // 文件形式的需要用 formData形式
        let formData = new FormData();
        formData.append('file', that.file);
        formData.append('dataDate', that.dataDate);
        that.btn.disable = true;
        that.btn.message = '上传中，请等待';
        if (that.uploadType == '1') {
          接口(formData).then((res) => {
            that.setData(res);
          });
        } else if (that.uploadType == '2') {
        }
      }
    },
    setData(res) {
      let that = this;
      if (res.code == 0) {
        that.$message.success(res.message);
        that.$refs.upload.clearFiles();
        that.btn.disable = false;
        that.btn.message = '上传服务器';
        that.importDialogVisible = false;
        that.$emit('successSubmit');
      } else {
        that.btn.disable = false;
        that.btn.message = '上传服务器';
        that.$message.error({
          message: res.message
        });
      }
    }
  }
};
</script>

　　在具体的vue文件中引用

import uploadFile from '../../../components/upload/upload.vue';

　　

 <upload-file
      :importDialogVis="importDialogVis"
      :type="1"
      :datadate="dataDate"
      @closeDia="closeDia"
      @successSubmit="successSubmit"
    ></upload-file>

importDialogVis：是否显示上传文件弹窗
type：上传文件调用接口类型
datadate：上传文件的日期

closeDia：方法 通知子组件关闭弹窗

successSubmit：通知子组件已上传完成