FormData是HTML5中新增的API，用于將表單數據編碼成一種鍵值對形式的格式，以便使用XMLHttpRequest等工具進行傳輸和處理。在Vue中，我們可以通過FormData來傳輸表單數據，實現文件上傳、表單提交等功能。本文將介紹Vue中如何使用FormData。 要使用FormData，首先需要定義一個變量作為FormData對象：

let formData = new FormData();

接下來，我們可以通過formData對象的append方法向其中添加鍵值對：

formData.append('key', 'value');

除了簡單的字符串鍵值對，還可以添加文件類型的數據。這里我們以上傳圖片為例： HTML代碼

<form>
<input type="file" name="photo">
</form>

JavaScript代碼

let form = document.querySelector('form');
let formData = new FormData(form);

這樣就可以將表單中的圖片數據保存到formData對象中了。 接下來，我們需要將formData對象傳輸到后臺處理。我們可以使用Vue的axios插件來實現：

axios({
method: 'post',
url: '/api/upload',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' }
})

這里需要注意的是，要使用multipart/form-data類型的Content-Type頭部，這樣才能正確地解析FormData數據。另外，axios插件本身就支持FormData對象，所以無需手動序列化FormData。 傳輸過程中，我們還需要實現上傳進度的顯示。Vue的axios插件也提供了onUploadProgress回調函數，在上傳過程中會自動執行：

axios({
method: 'post',
url: '/api/upload',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: function(progressEvent) {
console.log(progressEvent.loaded / progressEvent.total * 100 + '%');
}
})

在onUploadProgress回調函數中，我們可以獲取到上傳進度的信息，從而實現進度條等效果。 除了通過axios插件，我們還可以使用form表單或XMLHttpRequest對象來傳輸FormData數據。下面以XMLHttpRequest為例：

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send(formData);

通過XMLHttpRequest對象發送FormData數據的方式和axios插件大同小異，只是代碼略有不同而已。 總之，Vue中傳輸FormData格式的數據是一項非常重要的功能，尤其是在涉及文件上傳等方面。由于Vue的axios插件已經默認支持FormData對象，因此開發者不需要再通過手動序列化等方法來傳輸該格式的數據，大大提高了開發效率。