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

最新推荐文章于 2024-07-08 03:24:42 发布

SupperPigger

最新推荐文章于 2024-07-08 03:24:42 发布

阅读量1.2k

点赞数

分类专栏： Vue方法 Vue 文章标签： ElementUI上传Excel Vue上传Excel axios上传Excel 以流的形式上传Excel

本文链接：https://blog.csdn.net/SupperPigger/article/details/100098149

版权

Vue方法同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

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

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

<!-- template -->
<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
	})
}