element-ui组件库上传文件的使用（一、上传一个文件）

单独提一个子组件文件出来：

<template>
  <div class="upload-container">
    <el-dialog v-loading="loading" :title="title" :visible.sync="visible" width="70%" :before-close="beforeClose">
      <el-upload ref="fileUpload" class="upload-demo" drag :action="action" :data="data" :headers="headers" :multiple="false" accept=".xlsx,.xls" :file-list="fileLists" :on-change="handleChange" :on-remove="beforeRemove" :auto-upload="false" :on-success="handleSuc" :on-error="handleError" :on-exceed="handleExceed">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传excel文件（accept="xlsx,xls"），且不超过10M</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FileUpload',
  props: {
    visible: {//对话框的开关
      type: Boolean,
      default: false
    },
    action: {//后台地址
      type: String,
      default: ''
    },
    data: {//请求的额外参数
      type: Object
    }
  },
  data() {
    return {
      title: '上传',
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      },
      fileLists: [],
      loading: false
    }
  },
  methods: {
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(files, fileList) {
      //获取最后一次得到的文件
      const aa = fileList[fileList.length - 1]
      //覆盖上一次的文件
      this.fileLists = []
      this.fileLists.push(aa)
    },
    //文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      this.$notify.warning({
        title: '提示',
        message: '上传文件已存在,替换请先移除！',
        duration: 2000
      })
    },
    //因为el-upload中已经设置了accept的文件格式，:auto-upload="false" 将自动上传的功能关闭，所以下面的方法省略……
    //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
    handleBeforeUpoad(file) {
      var msg = file.name.substring(file.name.lastIndexOf('.') + 1)
      //判断文件格式
      if (!(msg === 'xls' || msg === 'xlsx')) {
        this.$refs.fileUpload.clearFiles()
        this.$notify.error({
          title: '错误',
          message: '上传文件只能是 xls、xlsx格式!',
          duration: 2000
        })
        return
      }
      //判断文件大小
      if (!(file.size / 1024 / 1024 < 10)) {
        // this.$refs.fileUpload.clearFiles()
        this.$notify.error({
          title: '错误',
          message: '上传文件大小不能超过 10MB!',
          duration: 2000
        })
        return
      }

      // return true
    },
    beforeRemove(file, fileList) {
      //清空已上传的文件列表（该方法不支持在 before-upload 中调用）
      this.$refs.fileUpload.clearFiles()
      this.fileLists = []
    },
    submit() {
   //判断上传文件，没有给出友好提示
      if (!this.fileLists || !this.fileLists.length) {
        this.$notify.error({
          title: '错误',
          message: '请选择上传的文件',
          duration: 2000
        })
        return
      }

      // 再次上传
      this.fileLists[0].status = 'ready'
      this.$refs.fileUpload.submit()
    },
    //文件上传成功时的钩子
    handleSuc(response, file, fileList) {
      //上传成功处理
      if (response.code === 0) {
        this.$notify({
          title: '成功',
          message: '上传成功',
          type: 'success',
          duration: 2000
        })
        this.beforeClose()
        //上传完成以后，调用父组件的方法进行刷新页面操作
        this.$emit('refresh-table', '')
      } else {
        //上传失败处理
        this.$notify.error({
          title: '失败',
          message: response.msg,
          duration: 3000
        })
      }
    },
    handleError(err, file, fileList) {
      //上传失败处理
      this.$notify.error({
        title: '失败',
        message: err,
        duration: 3000
      })
    },
    beforeClose() {
      this.$emit('update:visible', false) // 直接修改父组件的属性
      this.$refs.fileUpload.clearFiles()
    }
  }
}
</script>

此处可能会遇到的坑：如果在el-upload中设置了limit=1, 先选择一个文件，然后再选择一个文件进行替换时就不起作用了，所以此处将limit=1修改成 :multiple="false"就可以了。

父组件的引用方式，
<file-upload ref=“fileUpload1” v-if=“dialogFormVisible” :visible.sync=“dialogFormVisible” :action=“uploadAction” @refresh-table=“getList” :data=“listQuery” />

import FileUpload from ‘@/components/Upload/fileUpload’