form-data详解

小蓝 • 2024-12-12 11:59 • 编程

一、formdata传数组对象

在使用ajax上传formdata时，需要传递一个数组对象，像这样：

formData.append('names[]', 'Lucy');
formData.append('names[]', 'Lily');

通过这种方式，我们就可以传递一个数组了。

二、后端获取formdata

如何在后端获取前端传递的formData对象？在node.js中，我们可以通过使用multer中间件，来获取formdata中的文件和其他参数：

const multer = require('multer');
const upload = multer().array(); // 这里不需要传递任何参数

app.post('/upload', upload, (req, res) => {
  const files = req.files;
  const fields = req.body;
  // do something with fields and files
});

三、formdata转换成json

在前端使用FormData对象来构造表单数据时，我们可以通过调用FormData的entries()方法来获取表单数据，然后将其转换成json对象：

const formData = new FormData(document.querySelector('form'));
const object = {};
formData.forEach((value, key) => {
  object[key] = value;
});
const jsonData = JSON.stringify(object);

四、如何把formdata中的文件解析出来

在前端使用formdata上传文件时，我们可以使用FileReader对象来解析文件：

function readFile(file) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
    console.log(reader.result);
  };
}
const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);
readFile(fileInput.files[0]);

五、formdata.append怎么用

在前端使用ajax上传表单时，我们可以使用FormData对象的append()方法来添加表单数据：

const formData = new FormData();
formData.append('username', 'jack');
formData.append('password', '123456');

六、formdata和json区别

FormData是一种表单数据格式，用于在前端向后端提交数据，其中包含了键值对，可以包含文件、字符串、二进制数据等，而JSON是一种数据格式，用于在前端各个模块之间传递数据，其中只包含键值对，值可以是字符串、数字、对象、数组等。

七、文件流如何放进formdata

在前端使用ajax上传文件时，我们可以将文件流放进FormData对象中：

const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);

八、formdata格式

FormData对象的格式如下：

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

jack
------WebKitFormBoundary3pVjP1K4gE1vjnIO
Content-Disposition: form-data; name="password"

123456
------WebKitFormBoundary3pVjP1K4gE1vjnIO--

九、formdata参数

FormData对象的常用参数：

append(name, value)：添加一条表单数据
delete(name)：删除指定名称的一条表单数据
get(name)：获取指定名称的表单数据
getAll(name)：获取指定名称的所有表单数据
has(name)：判断是否存在指定名称的表单数据
set(name, value)：设置指定名称的表单数据

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