一、问题
- 需要将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
对象中,之后调用接口将表单数据传递给后端,根据返回的数据进行下一步操作,如渲染表单操作等。