FormData详解

小蓝 • 2024-12-12 12:44 • 编程

一、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对象中所有的键值对

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/241814.html