使用FormData：简化前端数据传输

前端

2023-08-13 13:33:25

从查询字符串迁移到 FormData：提升前端数据传输的可靠性

在前端开发中，经常需要将数据从客户端发送到服务器端，以进行数据处理或存储。传统上，开发者使用查询字符串（QueryString）的方式来发送数据，即在 URL 中附加一串键值对。虽然这种方法简单易用，但它存在一些明显的缺陷：

长度限制： 查询字符串的长度有限，可能无法满足某些数据的需求。
安全性问题： 查询字符串中的数据是明文的，容易被截获和篡改。
复杂性： 查询字符串难以处理复杂的数据结构，如数组或对象。

FormData：一种更强大的解决方案

为了解决这些问题，JavaScript 引入了 FormData 对象。它可以将数据编译成键值对，并以二进制格式发送到服务器端。与查询字符串相比，FormData 具有以下优势：

无长度限制： FormData 可以处理任意数量的数据。
安全可靠： FormData 中的数据以二进制格式传输，增强了安全性。
灵活高效： FormData 可以轻松处理复杂的数据结构，如数组和对象。

如何使用 FormData

使用 FormData 对象非常简单：

实例化： 创建一个新的 FormData 对象。
添加数据： 使用 append() 方法添加键值对。
发送数据： 使用 XMLHttpRequest 对象将 FormData 发送到服务器端。

代码示例：

const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', 'johndoe@example.com');

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/index.php');
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(formData);

上传文件

FormData 还可以用于上传文件到服务器端。只需使用 append() 方法添加一个 File 对象即可。

formData.append('avatar', fileInput.files[0]);

将 QS 插件请求转换为常规请求

QS 插件是一个常用的 JavaScript 库，用于简化查询字符串的处理。它可以将对象或数组转换为查询字符串，反之亦然。要将 QS 插件请求转换为常规请求，可以使用 FormData 对象：

实例化： 创建一个新的 FormData 对象。
使用 QS： 将请求参数转换为对象，并使用 append() 方法添加到 FormData 对象。
发送数据： 将 FormData 发送到服务器端。

代码示例：

const qs = require('qs');
const formData = new FormData();

const params = {
  name: 'John Doe',
  email: 'johndoe@example.com'
};

const queryString = qs.stringify(params);
const object = qs.parse(queryString);

formData.append('name', object.name);
formData.append('email', object.email);

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/index.php');
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(formData);