如何正确使用Form Data API进行数据提交？

Form Data API 写法详解

1. 什么是 Form Data？

Form Data 是一种编码格式，主要用于在 HTTP 请求中发送数据，尤其适用于在客户端与服务器间传输较为复杂的表单内容，如文字输入及文件上传，它支持多种类型的内容，并在上传文件时表现出高效的处理能力。

2. 使用 Apifox 构建和测试 API

Apifox 是一个功能强大的 API 测试工具，可以帮助开发者轻松地构建和测试包含 form-data 编码的 HTTP 请求，以下是具体步骤：

创建 HTTP 请求

1、打开 Apifox 并新建一个 HTTP 项目。

2、添加一个 POST 类型的请求，填入所需的请求 URL。

配置请求头

1、确保 Content-Type 被设定为multipart/form-data; boundary=XXXXX，其中boundary 是分割符，用来区分表单中的各个字段，Apifox 会自动处理这部分内容。

添加和编码字段

1、用户将需要在表单中加入所需的数据字段，对于文本类型的数据直接添加字段名和字段值，而文件上传则需包括文件名和内容，完成这些设置后，保存配置就完成了数据的编码工作。

发送请求并查验结果

1、储存设置后，切换到“运行”标签页上传文件或填写其他表单数据，然后发送请求至服务器。

2、发送成功后，可以在“实际请求”区域审核已上传的数据详情，包括通过 cURL 等方式的具体请求内容。

3. Axios 示例代码

在实际项目中，通常会通过编程实现上述操作，以下是一个使用 Axios 库进行数据发送的代码示例：

const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');
let data = new FormData();
data.append('file', fs.createReadStream('Apifox 上传文件.txt'));
data.append('name', '张三');
let config = {
  method: 'post',
  url: 'YOUR_API_URL',
  headers: {
    'User-Agent': 'Your User Agent',
    'Authorization': 'Your Authorization',
    ...data.getHeaders()
  },
  data: data
};
axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error);
  });

这段代码通过 Axios 发送一个 POST 请求，上传了文件以及其他表单数据，并在请求头部添加了必要的验证信息。

4. Spring Boot 中的 multipart/form-data 接口编写

在 Spring Boot 中，可以通过 Springdoc 来定义 multipart/form-data 接口，以下是一个示例代码：

@Operation(summary = "上传文件")
@PostMapping("/files/upload")
@RequestBody(content = {@Content(
    mediaType = "multipart/form-data",
    schema = @Schema(type = "object"),
    schemaProperties = {
        @SchemaProperty(
            name = "multipartFile",
            schema = @Schema(type = "string", format = "binary")
        ),
        @SchemaProperty(
            name = "info",
            schema = @Schema(type = "object")
        )
    }
)})
public CommonResult<String> upload(MultipartFile multipartFile, String info) {
    return CommonResult.success(multipartFile.toString());
}

这个接口定义了一个文件上传的 endpoint，接收 multipart/form-data 类型的请求体。

5. 前端使用 fetch 或 axios 发送请求

在前端，可以使用 fetch 或 axios 发送包含 form-data 的请求，以下是 fetch 的基本用法：

const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('email', 'john_doe@example.com');
formData.append('file', fileInput.files[0]);
fetch('https://example.com/api/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

这种方式与 axios 类似，但 axios 提供了更友好的 API。

相关问题与解答

问题1：如何在前端动态添加表单数据到 FormData 对象？

答：可以通过 FormData 对象的append 方法动态添加表单数据。

const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('email', 'john_doe@example.com');
formData.append('file', fileInput.files[0]);

这种方法灵活性高，可以根据需求动态添加数据。

问题2：在使用 axios 发送 FormData 请求时，如何自动设置适当的请求头？

答：Axios 会自动设置适当的请求头，因此不需要手动设置Content-Type 头，如果手动设置了Content-Type，fetch 可能会忽略 FormData 的边界信息，导致请求失败。

小伙伴们，上文介绍了“form data api写法”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。