element-ui/vue-element-admin上传excel等文件到服务器

上源码

   <el-upload
              ref="uploadExcel"
              action="你上传的服务器地址"
              :limit="limitNum"
              :auto-upload="true"
              accept=".xlsx"
              :before-upload="beforeUploadFile"
              :on-change="fileChange"
              :on-exceed="exceedFile"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
              :data="QQQ"
            >
              <el-button size="small" plain>选择文件el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传xlsx(Excel2007)文件，且不超过10M
              div>
            el-upload>

参数解析：
limit 可上传文件数量
auto-upload 是否可自动上传
accept 可上传的文件格式
before-upload 上传文件之前的钩子
on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
on-exceed 文件超出个数限制时的钩子
on-success 文件上传成功时的钩子
on-error 文件上传失败时的钩子
file-list 上传的文件列表
data 上传时附带的额外参数

 data() {
     
    return {
     
      limitNum: 1,
      fileList: []
    }

钩子函数

    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
     
      // console.log(file)
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx') {
     
        this.$notify.warning({
     
          title: '警告',
          message: `只能上传Excel（即后缀是.xlsx）的文件`
        })
      }
      if (size > 10) {
     
        this.$notify.warning({
     
          title: '警告',
          message: `文件大小不得超过10M`
        })
      }
    },
     // 文件状态改变时的钩子
    fileChange(file, fileList) {
     
      // console.log(file)
      // console.log(fileList)
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
     
      this.$notify.warning({
     
        title: '警告',
        message: `只能选择 ${
       
          this.limitNum
        } 个文件，当前共选择了 ${
       files.length + fileList.length} 个`
      })
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
     
      console.log(res)
     // this.formData.url = res.data  //服务器返回的文件地址
      this.$message({
     
        message: '文件上传成功',
        type: 'success'
      })
      this.$refs.uploadExcel.clearFiles()// 清楚上次上传记录
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
     
      this.$message.error(err.msg)
    },

this.$refs.uploadExcel.clearFiles() 虽不眼，其作用不可小觑，此处“uploadExcel”，即是 此处 ref=“uploadExcel”

综上所述：上传文件到服务器，基本剧终。

番外：

若你不想自动上传， 来个button喽

  <el-button type="primary" @click="uploadClick">确 定</el-button>

 uploadClick() {
     
    this.$refs.uploadExcel.submit()
  }

如有不妥，欢迎指正！