Vue2.x+Element实现文件导入

一、问题

• 需要将Excel文件进行导入，传递给后端，成功导入后接收到后端返回的数据重新渲染列表

二、解决

• 利用Element组件Upload实现文件上传（导入功能），具体代码如下：

  <!-- html部分 -->
  <el-tooltip content="导入队伍" placement="top-start">
  	<el-upload :show-file-list="false" action="" :http-request="putinTeam">
  		<i class="iconfont icon-upload"></i>
  	</el-upload>
  </el-tooltip>
  

  // putinTeam方法如下
  async putinTeam(files) {
      let form = new FormData()
      form.append('file', files.file)
      const res = await this.$postFile(`${this.$url}/src/url_in_here`, form)
      if (res.code !== 200) {
          this.$message.error(res.msg)
          return
      }
      this.initData()
      this.$message.success(res.msg)
  },
  

• 根据Element官方提供的属性http-request，覆盖默认的上传行为，重新定义方法进行上传，其中默认携带的参数为上传的文件对象，打印结果如下：

• 之后利用初始化一个formData对象，并将传入的文件对象追加到formData对象中，之后调用接口将表单数据传递给后端，根据返回的数据进行下一步操作，如渲染表单操作等。