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])
我尼玛!!