import qs from "qs"; 的作用是引入 qs 库，用于处理 URL 查询字符串的解析和序列化。它在 HTTP 请求中非常有用，尤其是在需要将复杂数据转换为 URL 编码格式时。
1. application/json;charset=utf-8
特点
请求体是一个 JSON 格式的字符串。
数据以键值对的形式组织，支持嵌套结构和复杂数据类型（如数组、对象）。
通常与 JSON.stringify(data) 配合使用，将 JavaScript 对象转换为 JSON 字符串。
使用场景
适用于需要传递复杂数据的接口，比如：
提交表单数据时，字段较多或包含嵌套结构。
后端接口明确要求 JSON 格式的请求体。
示例代码
Javascript
1. headers: { 'Content-Type': 'application/json;charset=utf-8' },
2. data: JSON.stringify(data), // 将对象转换为 JSON 字符串2. application/x-www-form-urlencoded
特点
请求体是一个 URL 编码的字符串，格式为 key1=value1&key2=value2 。
数据以键值对的形式组织，但不支持嵌套结构。
通常与 qs.stringify(data) 配合使用，将对象转换为 URL 编码的字符串。
使用场景
适用于传统的表单提交，比如：
提交简单的键值对数据。
后端接口要求表单格式的数据。
示例代码
Javascript
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data), // 将对象转换为 URL 编码的字符串总结
application/json ：用于复杂数据，支持嵌套结构，通常与 JSON.stringify 配合使用。
application/x-www-form-urlencoded ：用于简单键值对数据，通常与 qs.stringify 配合使用。
具体使用哪种格式取决于后端接口的设计要求
3.'Content-Type':'multipart/form-data'
- 核心特点
Content-Type: multipart/form-data ：
这是专门用于文件上传的 HTTP 请求头格式。
支持将文件数据和其他表单字段（如文本参数）一起传输。
data 参数：
通常是一个 FormData 对象，用于封装文件和其他字段。
例如：
Javascript
-
const formData = new FormData();
-
formData.append('file', file); // 文件对象
-
formData.append('description', '图片介绍'); // 附加文本字段
-
典型应用场景
(1) 图片上传
示例：用户上传风险事件的现场图片。
流程：
前端通过 <input type="file"> 获取文件。
将文件包装为 FormData 。
调用 xxapi(formData) 上传到后端。
(2) 多文件或混合数据上传
示例：上传图片的同时附带文本描述或元数据。
代码：
Javascript
-
const formData = new FormData();
-
formData.append('images', file1); // 文件1
-
formData.append('images', file2); // 文件2
-
formData.append('comment', 'xx'); // 文本字段
-
riskUploadImage(formData);
(3) 兼容性场景
老式表单提交：如果后端接口要求兼容传统表单文件上传（如某些遗留系统）， multipart/form-data 是标准方式。
- 为什么用 multipart/form-data ？
文件支持：普通 JSON 或 URL 编码格式无法直接传输二进制文件。
分块传输：大文件会被分块传输，避免内存溢出。
字段混合：可以同时传递文件和非文件字段（如 userId 、 timestamp ）。
- 注意事项
FormData 对象：
必须使用 new FormData() 构造，不能直接传递普通对象。
文件需通过 append 方法添加。
后端处理：
后端需支持解析 multipart/form-data （如使用 multer （Node.js）或 MultipartFile （Spring Boot））。
边界问题：
multipart/form-data 会自动生成边界分隔符（如 ------WebKitFormBoundaryxxx ），无需手动设置
总结
何时用：需要上传文件（如图片、文档）或混合文件与非文件数据时。
关键点：
使用 FormData 封装文件。
设置 Content-Type: multipart/form-data 。
后端需支持对应解析逻辑。
qs.stringify(data)和JSON.stringify(data) 一样不？
qs.stringify(data) 和 JSON.stringify(data) 是两种完全不同的序列化方法，它们的作用和输出结果有显著区别。以下是它们的对比：
- JSON.stringify(data)
作用
将 JavaScript 对象转换为 JSON 格式的字符串。
JSON 是一种轻量级的数据交换格式，支持复杂数据结构（如嵌套对象、数组等）。
输出示例
Javascript
-
const data = { name: "John", age: 30, hobbies: ["reading", "coding"] };
-
const jsonStr = JSON.stringify(data);
3.// 输出: '{"name":"John","age":30,"hobbies":["reading","coding"]}'
特点
保留数据的完整结构（包括嵌套字段和数组）。
适用于需要传递复杂数据的场景（如 REST API 的 application/json 请求）。
不支持 URL 编码，直接输出标准的 JSON 字符串。
使用场景
当后端接口要求 Content-Type: application/json 时使用。
例如：
Javascript
-
headers: { 'Content-Type': 'application/json' },
-
data: JSON.stringify(data),
-
qs.stringify(data)
作用
将 JavaScript 对象转换为 URL 编码的查询字符串。
主要用于表单提交或 URL 查询参数。
输出示例
Javascript
-
const data = { name: "John", age: 30, hobbies: ["reading", "coding"] };
-
const queryStr = qs.stringify(data);
-
// 默认输出: 'name=John&age=30&hobbies[0]=reading&hobbies[1]=coding'
-
// 如果配置 { arrayFormat: 'comma' }: 'name=John&age=30&hobbies=reading,coding'
特点
将数据转换为 key=value 的形式，用 & 连接。
支持配置数组的序列化方式（如逗号分隔、索引等）。
适用于 Content-Type: application/x-www-form-urlencoded 的请求。
使用场景
当后端接口要求 Content-Type: application/x-www-form-urlencoded 时使用。
例如：
Javascript
-
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-
data: qs.stringify(data, { arrayFormat: 'comma' }),