2022-04-02 如何打印FormData里的值

2022-04-02

前言:vue+iview項目,做一個圖片上傳功能。

做這個功能，我需要把圖片信息、接口參數push到表單FormData里面，然后通過axios.request調接口返回給后台。

剛開始時我是直接打印它的值，比如代碼是：

let formData = new FormData();  // 創建表單值
formData.append('file', file); // 給表單賦值
console.log(formData); // 打印表單值

結果打印出來是：

FormData: {}

遂，上網尋找答案。

終，找到了答案。

解決方案：

// 使用遍歷方式輸出表單值
//第一種
for (var value of formData.values()) {
   console.log(value);
}
//第二種
for (var [a, b] of formData.entries()) {
   console.log(a, b);
} 
// 使用表單的api輸出值（第三種）
console.log(formData.get('file'));

為什么在控制台直接打印不出來：

因為外界訪問不到，你使用append方法后，對應的鍵值對就已經添加到表單里面了，你在控制台看到的是FormData原型，存儲的數據沒有以對象屬性的方式體現。

解決方案傳送門：https://segmentfault.com/q/1010000017742787

2022-08-05 實測：

formdata.get('鍵值')在react-native環境下打印報錯，如果是直接打印則能顯示值，但不能顯示指定的值，具體為：

let a = new FormData();
a.append('name', '我尼瑪');
console.log(a); // {"_parts": [["name", "我尼瑪"]]} 

console.log(a.get('name')); // TypeError: a.get is not a function. (In 'a.get('name')', 'a.get' is undefined)

注意看，console.log(a);返回了一個對象，所以這就是為什么使用不了get方法。盲猜是react-native在這塊做了處理，可以直接輸出formdata的所有值，注意是所有值。

如果想要拿到指定的值，可以console.log(a._parts[0])

我尼瑪！！