HTML代码：

    <el-upload
       class="upload-demo"
       align="center"
       drag
       :limit="1"
       :auto-upload="false" 
       action="" 
       :on-change="handleChangeVideo"
       :file-list="fileList"
       >
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
     </el-upload>
     
     <div slot="footer" class="dialog-footer">
       <el-button @click="onclose" >取 消</el-button>
       <el-button type="primary" @click="submit">确 定</el-button>
     </div>

方法：

    // 上传文件
    handleChangeVideo(file, fileList) {
      const isLt10M = file.size / 1024 / 1024 < 10
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xls'
      const extension2 = testmsg === 'xlsx'
      if (!extension && !extension2) {
        this.$message.error('Upload file can only be XLS or xlsx format!')
        this.fileList = []
        this.file = '';
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不超过10M!')
        return false
      }
      this.loaddingStatus = true
      // 请求接口前需要传的参数
      this.file = file.raw
    },

文件上传的方法：

    submit(){
      if(!this.file){return false}
      const formData = new FormData()
      formData.append('file', this.file)
      request({
        url: '/fileRecord/importTemplate',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(resp => {
        if (resp.code === 0) {
          this.inforForm = resp.data
          this.$message({
            type: 'success',
            message: '上传成功'
          })
        }
        this.$emit('reloadList', 'true')
        this.insertVisible = false
        this.loaddingStatus = false
        this.fileList = []
        this.file = ''
      }).catch(err => {
        console.log(err)
        this.loaddingStatus = false
        this.fileList = []
        this.file = ''
      })
    },