将文件拖到此处，点击上传

<template>
  <div v-loading="loading">
    <el-upload
      ref="uploadExcel"
      class="upload-demo"
      drag
      :http-request="uploadFile"
      action="action"
      :limit="limitNum"
      :show-file-list="true"
      accept=".xlsx,.xls"
      :before-upload="beforeUploadFile"
      :on-change="fileChange"
      :on-exceed="exceedFile"
      :on-success="handleSuccess"
      :on-error="handleError"
      :file-list="fileList"
      :headers="myHeaders"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传xlsx、xls文件，且不超过10M</div>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  props: {
    // 上传到服务器的地址
    actionPath: {
      type: String,
      default: ''
    },
    // 最大允许上传个数
    limitNum: {
      type: Number,
      default: () => {
        return 100
      }
    }

  },
  data() {
    return {
      myHeaders: {
        token: this.$store.getters.token
      },
      fileList: [],
      loading: false,
      action: process.env.VUE_APP_BASE_API + this.actionPath
    }
  },
  methods: {
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile: function(file) {
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx' && extension !== 'xls') {
        this.msgWarning('只能上传后缀以.xlsx、.xls结尾的文件')
        // this.$notify.warning({
        //   title: '警告',
        //   message: `只能上传后缀是.xlsx、.xls的文件`
        // })
        return false
      }
      if (size > 10) {
        this.msgWarning('文件大小不得超过10M')
        // this.$notify.warning({
        //   title: '警告',
        //   message: `文件大小不得超过10M`
        // })
        return false
      }
    },
    // 自定义上传方法
    uploadFile: function(file) {
      this.loading = false
      const formData = new FormData()
      formData.append('multipartFile', file.file)
      this.requestUpload(this.action, formData)
    },
    requestUpload: function(url, query) {
      axios({ headers: { 'Content-Type': 'multipart/form-data', 'token': getToken() }, method: 'POST', data: query, url: url })
        .then(res => {
          if (res && res.data && res.data.code === '00000000' && res.data.success) {
            this.$emit('toGetPageList')
            this.msgSuccess(res.data.msg)
          } else {
            this.fileList = this.fileList.slice(0, -1)
            this.msgWarning(res.data.msg)
          }
        })
        .catch(() => {
          this.fileList = this.fileList.slice(0, -1)
          this.msgWarning('网络异常')
        })
    },
    // 文件状态改变时的钩子
    fileChange: function(file, fileList) {
      // console.log(file)
      // console.log(fileList)
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.msgWarning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
      // this.$notify.warning({
      //   title: '警告',
      //   message: `只能选择 ${
      //     this.limitNum
      //   } 个文件，当前共选择了 ${files.length + fileList.length} 个`
      // })
      return false
    },
    // 文件上传成功时的钩子
    handleSuccess: function(res, file, fileList) {
      console.log(res)
      if (res !== null) {
      // this.formData.url = res.data  //服务器返回的文件地址
        this.$refs.uploadExcel.clearFiles()// 清除上次上传记录
        this.$emit('closeDialog')
      }
      this.loading = false
    },
    // 文件上传失败时的钩子
    handleError: function(err, file, fileList) {
      this.fileList = fileList.slice(0, -1)
      this.msgError(err.msg)
      this.loading = false
    },
    // 处理进度条
    handleProgress: function(e, file, v) {
      this.loading = true
      console.log(e, file, v, '=====================')
    }
  }
}
</script>