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])

我尼玛！！