前言：在表單數據提交中，常常除了字符串拼接的方式傳給后端，一般可能還需要使用Fromdata的格式包裝所要提交的表單數據傳遞。

常用場景：表單數據提交

一、Formdata的優勢

使用 FormData 主要是因為它有兩個獨特優勢：

1. 能輕松處理文件上傳
   普通的 JSON 格式無法直接包含文件內容，而 FormData 可以天然支持文件上傳，這是它最常用的場景。

2. 模擬傳統表單提交
   當你需要像傳統 HTML 表單（enctype="multipart/form-data"）那樣提交數據時，FormData 會自動處理數據格式，讓服務器能像解析普通表單一樣解析它。

二、FormData 的數據結構

可以理解成一個鍵值對的集合，但比普通對象更靈活：

• 一個鍵可以對應多個值（比如多選框的多個選項）
• 可以包含文件對象（這是它的核心優勢）

舉個例子，假設你有這樣的表單數據：

// 普通對象形式
const formMess = {username: '張三',hobbies: ['籃球', '游戲'], // 一個鍵對應多個值avatar: File對象 // 圖片文件
}

轉成 FormData 后，內部結構類似：

鍵: "username" → 值: "張三"
鍵: "hobbies" → 值: "籃球"
鍵: "hobbies" → 值: "游戲"
鍵: "avatar" → 值: (二進制文件數據)

三、獲取FromData里面的值

你可以通過formData.get('username')獲取單個值，或formData.getAll('hobbies')獲取多個值。

簡單說，FormData 就是為表單數據（尤其是帶文件的）量身定做的 "包裝器"，讓數據傳遞更符合表單提交的規范。

四、使用FromData的場景

簡單說，當你需要提交包含文件的數據，或者要模擬傳統 HTML 表單的提交方式時，就需要用到 FormData。

具體場景包括：

1. 上傳文件時必須用
   比如上傳頭像、圖片、文檔等，因為普通的 JSON 格式無法處理二進制文件數據，而 FormData 能天然支持文件對象的傳遞。

2. 需要提交復雜表單數據時
   比如包含多選框（一個字段對應多個值）、下拉選擇器等，FormData 可以很方便地處理 "一個鍵對應多個值" 的情況。

3. 需要模擬傳統表單提交行為時
   當后端接口要求數據格式必須是multipart/form-data（傳統表單的默認編碼方式）時，用 FormData 能讓瀏覽器自動處理數據格式，避免手動拼接格式導致的錯誤。

4. 跨域表單提交且需要攜帶 Cookie 時
   結合 axios 的withCredentials: true，FormData 可以更規范地處理跨域場景下的表單數據提交。

反過來，如果只是提交簡單的文本數據（如用戶名、密碼），用普通 JSON 格式（application/json）會更簡潔，沒必要用 FormData。

五、FormData可支持的數據類型

FormData 雖然最常用于文件上傳，但實際上它能發送各種表單常見的數據類型，只要是鍵值對形式的數據都能處理，包括：

1. 普通文本數據
   比如輸入框里的字符串（用戶名、郵箱）、數字（年齡、手機號）等，像?username: "張三"、age: 25?這類鍵值對都能直接添加。

2. 多選數據
   比如表單里的多選框（checkbox），一個鍵可以對應多個值。例如?hobby: "籃球"?和?hobby: "游戲"?可以同時存在，后端能接收到一個包含多個值的數組。

3. 布爾值 / 開關狀態
   比如單選按鈕（radio）或開關組件的狀態，像?agree: true（同意協議）這種布爾值也能正常傳遞。

4. 日期 / 時間
   表單里的日期選擇器數據，比如?birthday: "2000-01-01"?這種字符串格式的日期，同樣可以通過 FormData 發送。

5. 二進制數據（非文件）
   除了文件，其他二進制數據（比如手動生成的二進制流）也能通過?formData.append(key, 二進制對象)?方式添加。

簡單說，只要是表單里能填的、選的、勾的內容，不管是文本、數字、選項還是開關狀態，FormData 都能統一打包發送，用法和普通對象類似，只是格式更符合表單提交的規范。

六、舉個例子

<template><div class="from_box"><form action=""><input type="text"  placeholder="請輸入昵稱" v-model="formMess.account"><input type="password" placeholder="請輸入密碼" v-model="formMess.act_pwd"><input type="text" placeholder="請輸入手機號" v-model="formMess.phone"></form><span class="button" @click="onSubmit()">提交</span></div>
</template><script>
import axios from 'axios';export default {name: "from",data() {return {formMess:{"account":"","act_pwd":"","phone":""}};},methods: {onSubmit() {/* json格式提交： */// let formData = JSON.stringify(this.formMess);/* formData格式提交： */let formData = new FormData();for(var key in this.formMess){formData.append(key,this.formMess[key]);}axios({method:"post",url:"xxxxxxx",headers: {"Content-Type": "multipart/form-data"},withCredentials:true,data:formData}).then((res)=>{console.log(res);});}}
};
</script>