input type=file 用axios发送请求给后端，使用FormData格式发送请求

原创已于 2022-08-09 10:38:48 修改 · 4.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #node.js

于 2020-03-11 10:44:28 首次发布

JavaScript/JQuery/TypeScript 同时被 2 个专栏收录

67 篇文章

订阅专栏

19 篇文章

订阅专栏

本文介绍了解决前端文件上传至后端的问题，详细讲述了如何使用FormData替代payload方式，通过axios正确发送文件及参数至后端。文章强调了在iview框架下，利用before-upload属性控制上传流程，确保上传过程的正确性和高效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做一个文件上传功能时，遇到一个问题，把前端用input上传的file发送给后端，像往常一样用axios传data，用QS stringify 序列化数据发送给后端，并不接受，查了好多资料才解决，原来我们的后端不接受 payload 方式上传，只能用 FormData 格式，把所有参数都放在 FormData 内发送过去即可。

html 部分代码，使用了iview框架：

<Form ref="uploadForm" class="no-validate" :model="uploadForm" :label-width="90" @submit.native.prevent>
	<FormItem label="广告商">
		<Select size="small" v-model="uploadForm.advertiser" filterable placeholder="选择广告商">
			<Option v-for="(item, index) in advertiserList" :key="index" :value="item.aadId">{{ item.name }}</Option>
		</Select>
	</FormItem>
	<FormItem label="表格文件">
		<Upload :before-upload="handleUpload" action="advert/settlement/importConsume.htm">
			<Button icon="ios-cloud-upload-outline">选择本地表格文件</Button>
		</Upload>
		<div v-if="uploadForm.file">{{ uploadForm.file.name }}</div>
	</FormItem>
</Form>

upload 组件要用 before-upload 属性控制手动上传，不能自动，返回值可以获取到所选的文件 file 对象

js 部分代码：

// file 参数就是已选的本地文件
handleUpload (file) {
	this.uploadForm.file = file;
	return false;
},
// 创建后台接收文件的必须格式 FormData，所有参数都用 append 添加
let formObj = new FormData()
formObj.append('file', this.uploadForm.file)
// 后台需要的其他参数也一起append进来
formObj.append('aadId', this.uploadForm.advertiser)
const header = {
	// 必须要把 Content-Type 改为 multipart/form-data
	'Content-Type': 'multipart/form-data',
	'request-productid': this.queryForm.ID.toString(),
}