input type=file 用axios發送請求給後端，使用FormData格式發送請求

今天在做一個文件上傳功能時，遇到一個問題，把前端用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.gameID.toString(),
	'request-locale': '01'
}

最後把這個整理完畢的 FormData 對象用axios發送給後端