一、formdata传数组对象
在前端开发过程中,有时我们需要上传的数据是一个数组对象,这时候我们可以使用FormData将数组对象传给后台。
举个例子:
let arr = [{name:'张三', age:20},{name:'李四', age:21},{name:'王五', age:22}];
首先,我们需要将数组对象转成JSON字符串格式,然后再通过FormData传给后台:
let formData = new FormData(); formData.append('data', JSON.stringify(arr));
在后台可以通过如下代码来解析数组对象:
let data = JSON.parse(req.body.data); console.log(data); // [{name:'张三', age:20},{name:'李四', age:21},{name:'王五', age:22}]
二、微信小程序使用FormData
在微信小程序中,可以使用wx.uploadFile方法上传文件,该方法支持FormData对象。
举个例子:
wx.chooseImage({ success: function (res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://example.com/upload', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test' }, success: function (res){ var data = res.data //do something } }) } })
我们可以通过wx.uploadFile方法上传文件,并且发送FormData数据。
三、FormData转换成JSON
有时候我们需要将FormData对象转成JSON字符串格式,可以通过以下代码实现:
let formData = new FormData(document.querySelector('form')); let jsonObj = {}; for (let [key,value] of formData.entries()) { jsonObj[key] = value; } let jsonString = JSON.stringify(jsonObj);
这样就可以将FormData对象转换成JSON格式。
四、如何把FormData中的文件解析出来
FormData中的文件需要通过后台接口来解析,前端可以通过FormData对象的get方法来获取文件:
let formData = new FormData(document.forms[0]); let file = formData.get('file'); console.log(file);
五、FormData.append怎么用
FormData.append方法可以向FormData对象中添加一个键值对,如下所示:
let formData = new FormData(); formData.append('name', '张三'); formData.append('age', '20');
六、FormData和JSON区别
FormData主要用于序列化表单以及创建表单数据,可以通过ajax提交表单数据。而JSON数据格式是一种比较流行的数据交换格式,可以用于前后端数据交换、存储等。FormData主要用于传输表单数据,而JSON可以用于存储/交换任何类型的数据。
七、文件流如何放进FormData
我们可以通过Blob对象来将文件流放进FormData对象中:
let blob = new Blob(['Hello, world!'], { type: 'text/plain' }); let formData = new FormData(); formData.append('file', blob);
八、FormData格式
FormData的格式类似于键值对的格式,如下所示:
let formData = new FormData(); formData.append('name', '张三'); formData.append('age', '20');
九、FormData参数
FormData有以下参数:
- append(name, value, filename): 向FormData对象添加一个键值对
- delete(name): 删除FormData对象中指定键名的键值对
- get(name): 返回指定键名对应的值
- getAll(name): 返回指定键名对应的所有值
- set(name, value, filename): 修改FormData对象中指定键名对应的值
- has(name): 判断FormData对象中是否存在指定键名的键值对
- entries(): 返回FormData对象中所有的键值对