Vue 中使用 axios 模拟 form 表单以流的形式给后端传Excel文件 FormData 方法的使用

前几天在公司做项目的时候，遇到一个需求，是在网页上上传Excel给后台进行数据分析。

公司前端所选用的技术是Vue + Axios + ElementUI、后端选用的是Spring Boot。

<el-upload
	:multiple="false"
	:auto-upload="true"
	:http-request="uploadFile"
	accept=".xls,.xlsx">
	<el-button
		size="small"
		type="primary"
		>导入Excel文件
			<i class="el-icon-upload"/>
	el-button>
el-upload>

/* methods */
import axios from 'axios'

uploadFile(item) {
	const fileObj = item.file;	
	let msgForm = new FormData();	// 创建FormData
	msgForm.append('file', fileObj);	// 向FormData中添加文件对象
	msgForm.get("file");	// 此方法可以查看FormData中插入的对象
	axios.post(url, msgForm, {	// axios请求
      headers: { 'Content-Type': 'multipart/form-data' }	// 切记，一定要修改请求头。
    }).then( res => {
		// success
	})
}