formdata格式传递参数详解

小蓝 • 2024-12-05 14:04 • 编程

一、前端formdata格式传递参数

前端通过表单或ajax请求时，通常使用formdata格式传递参数。利用表单的方式传递参数相对简单，只需要设置表单的enctype属性为”multipart/form-data”即可。ajax请求时，需要创建FormData对象，并使用append()方法添加键值对，示例如下：


let formData = new FormData();
formData.append("username", "admin");
formData.append("password", "123456");

$.ajax({
  url: "/login",
  type: "POST",
  data: formData,
  processData: false,
  contentType: false,
  success: function(data) {
    console.log(data);
  }
});

二、formdata格式传参数

formdata格式的参数传递支持多种数据类型，如文本、文件等。对于文本数据，可以直接使用FormData对象的append()方法添加键值对；对于文件数据，则需要通过File对象创建，再使用FormData的append()方法添加。示例如下：


let formData = new FormData();
formData.append("username", "admin");
formData.append("file", file); // file为File对象

$.ajax({
  url: "/upload",
  type: "POST",
  data: formData,
  processData: false,
  contentType: false,
  success: function(data) {
    console.log(data);
  }
});

三、formdata格式参数样式

formdata格式的参数传递样式与常规的键值对数据相似，使用键值对的形式添加参数，示例如下：


Content-Disposition: form-data; name="username"

admin

四、formdata数据格式请求

在服务器端接收formdata格式传递参数时，需要使用特殊的解析方式。对于表单的方式传递，可以使用multipart/form-data格式解析；对于ajax请求，需要使用流的方式解析。示例如下：


// 解析multipart/form-data格式
const busboy = new Busboy({ headers: req.headers });
busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
  // file为File对象
});
busboy.on("field", (fieldname, val, fieldnameTruncated, valTruncated, encoding, mimetype) => {
  // val为字段值
});
req.pipe(busboy);

// 解析流
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
  // fields为键值对数据，files为文件数据
});

五、formdata和json传递的区别

formdata格式和json格式都是一种常用的参数传递方式。formdata格式主要用于传递二进制数据或文件，而json格式则用于传递结构化数据。

在使用ajax请求时，如果需要传递二进制数据或文件，则必须使用formdata格式；如果传递结构化数据，则可以使用json格式。示例如下：


$.ajax({
  url: "/login",
  type: "POST",
  data: { username: "admin", password: "123456" }, // json格式
  success: function(data) {
    console.log(data);
  }
});

$.ajax({
  url: "/upload",
  type: "POST",
  data: formData, // formdata格式
  processData: false,
  contentType: false,
  success: function(data) {
    console.log(data);
  }
});

六、formdata是什么

FormData是一种对象类型，可以用来获取表单元素的值，创建键值对数据或者二进制数据，然后使用XMLHttpRequest或fetch API将数据提交到服务器端。可以使用append()添加键值对或二进制数据，使用delete()删除键值对数据，使用entries()获取一个用于迭代所有键值对的迭代器，使用get()获取指定键名的键值对数据等等。示例如下：


let formData = new FormData();
formData.append("username", "admin");
formData.append("file", file);

console.log(formData.get("username")); // admin
console.log(formData.getAll("file")); // [File]
console.log(formData.entries()); // 返回一个迭代器
formData.delete("username");
console.log(formData.has("username")); // false

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