el-import 上传.xls或.xlsx文件

<template>
  <el-upload
    ref="upload"
    class="upload"
    :headers="{ token: token }"
    :action="upLoadUrl"
    :before-upload="beforeUploadFile"
    :on-change="fileChange"
    :on-remove="handleRemove"
    :on-success="imgSuccess"
    :file-list="fileList"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import Vue from 'vue'

export default {
  data() {
    return {
      // visible: false,
      upLoadUrl: '',
      // (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY
      //   ? '/proxyApi/'
      //   : window.SITE_CONFIG.baseUrl) + '/v1/common/uploadExcelFile',
      token: Vue.cookie.get('token'),
      fileList: [], // excel文件列表
      formData: new FormData(),
      dataForm: {
        file: ''
      },
      dataRule: {
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      for (const i in this.fileList) {
        if (this.fileList[i].uid === file.uid) {
          this.fileList.splice(i, 1)
        }
      }
      this.dataForm.file = ''
    },
    // 文件上传成功回调
    imgSuccess(res) {
      if (res.code === 0) {
        this.dataForm.file = res.data
      } else {
        this.dataForm.file = ''
      }
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList = fileList
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者停止上传
    beforeUploadFile(file) {
      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = fileName === 'xlsx'
      const extension2 = fileName === 'xls'
      if (!extension && !extension2) {
        this.$message.warning('导入文件只能是.xls或.xlsx格式的文件!')
        this.fileList.splice(this.fileList.length - 1, 1)
      }
      return extension || extension2
    },
    init() {
      // this.visible = true
      this.fileList.splice(0, this.fileList.length)
      this.dataForm.file = ''
    }
    // // 表单提交
    // dataFormSubmit() {
    //   this.$refs['dataForm'].validate((valid) => {
    //     if (valid) {
    //       console.log('文件上传格式正确')
    // this.$http({
    //   url: this.$http.adornUrl('/v1/sys/server/import'),
    //   method: 'post',
    //   data: this.$http.adornData({
    //     filePath: this.dataForm.file
    //   })
    // }).then(({ data }) => {
    //   if (data && data.code === 0) {
    //     this.$message.success(data.msg)
    //     this.visible = false
    //     this.$refs.upload.clearFiles()
    //     this.$emit('refreshDataList')
    //   } else {
    //     this.visible = false
    //     this.$refs.upload.clearFiles()
    //     this.$emit('refreshDataList')
    //   }
    // })
    //     }
    //   })
    // }
  }
}
</script>