在Web開發中，一種很常見的需求就是向后端發送表單數據。使用傳統的方式來拼接表單數據，需要手動將每個input的name和value拼接成URL參數，并且不利于處理二進制文件，容易出現參數污染的問題。 為了解決這些問題，HTML5引入了FormData對象。通過它，我們可以用一種更為高效，靈活，安全的方式來處理表單數據，并且支持文件上傳。 在Vue中使用FormData非常方便，在代碼中我們可以使用 FormData 對象來處理表單數據。 下面我們來看一個例子：

<template>
<form>
<input type="text" v-model="name">
<input type="file" ref="file">
<button @click.prevent="submit">提交</button>
</form>
</template>
<script>
export default {
data: function() {
return {
name: '',
}
},
methods: {
async submit() {
const formData = new FormData();
formData.append('name', this.name);
formData.append('file', this.$refs.file.files[0]);
try {
await this.$axios.post('/api/submit', formData);
} catch (e) {
alert(e.message);
}
}
}
};
</script>

在上面這個例子中，我們創建了一個表單，里面包含了一個輸入框和一個文件上傳框。當用戶點擊提交按鈕的時候，我們通過Vue中的$refs來獲取到用戶選擇的文件并創建FormData對象，然后將我們需要提交的數據append進去（注意連續上傳文件需要append到同一個FormData中）。 接著我們使用Vue中的$axios來發起POST請求，將FormData作為參數一起發送給后端服務去處理。 值得一提的是，如果你需要發送FormData，你需要將請求的content-type設置為multipart/form-data，即該請求中包含二進制數據，而不是application/x-www-form-urlencoded這種常見的表單提交。 因此我們在axios實例中可以添加以下代碼：

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

這樣axios默認的post請求就都會自動使用multipart/form-data了。 好了，這就是Vue中使用FormData來處理表單數據的方法，非常的方便，也可以使用同樣的方式來處理上傳多個文件或更多格式的數據。