ElementUI的upload组件手动上传，并携带参数和excel文件流提交给后台

使用场景：

选取好excel文件后，再把导入的excel文件和参数同时提交给服务器，需要用到文件的手动上传，但是直接拷贝官网的demo会出现问题，下面会具体说明要注意的问题点。

 

直接上代码：

index.vue

        
          
        
        
          
        
        
          
            选取文件
            
只能上传xls格式的 excel文件
          
        



        取消
        上传到服务器

 

 

// param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file
httpRequest(param) {
  console.log(param)
  let fileObj = param.file // 相当于input里取得的files
  let fd = new FormData()// FormData 对象
  fd.append('file', fileObj)// 文件对象
  fd.append('platNum', this.importList.platNum)
  fd.append('taskName', this.importList.taskName)

  let url = process.env.CMS1_BASE_API + 'cdnDel/uploadExcel'
  let config = {
    headers: {
     'Content-Type': 'multipart/form-data'
    }
  }
  axios.post(url, fd, config).then(res=>{
   if(res.code===0){
     this.submitForm();//提交表单
   }
  })
}

手动上传的话，action 可以不用关注咯。

:auto-upload="false" 设置为flase ,为手动上传。

 

⚠️upload组件注意点：

 

1. 选取好文件后，如何触发上传到服务器的操作呢？

我们可以使用官网提供的 submit() 方法

this.$refs.upload.submit();

但是要注意执行submit方法后，他会触发upload组件中的 http-request ，而 httpRequest 这个方法是需要你自己去定义的,实例请见上面的代码，亲测可用。

:http-request="httpRequest"

官网定义如下：

 

2. 注意在增加文件和删除文件时，对 :file-list 上传的文件列表进行相应的增减

      选取文件
      
只能上传xls格式的 excel文件

 

// fileList 是文件列表发生变化后，返回的修改后的列表对象，这里直接赋值就好啦！
fileChange(file, fileList) {
  // console.log(file.raw)
  this.dataList = fileList
},

on-change 是文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

 

3. 注意上传时，请求头要修改为 ‘multipart/form-data’ 

我们需要创建一个 FormData 对象，以表单的形式上传参数和excel文件

// param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file
httpRequest(param) {
  console.log(param)
  let fileObj = param.file // 相当于input里取得的files
  let fd = new FormData()// FormData 对象
  fd.append('file', fileObj)// 文件对象
  fd.append('platNum', this.importList.platNum)
  fd.append('taskName', this.importList.taskName)

}

4. 如果把提交函数用在http-request钩子中，fileList多长就执行请求多少次接口，依旧是无法做到只请求一次上传多文件