您的位置:

form-data详解

一、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对象的常用参数:

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