Axios FormData 不是 JSON - JavaScript

简介

在使用 JavaScript 进行网络请求时，Axios 是一个常用的库。它提供了一个简洁而强大的 API，用于创建和发送 HTTP 请求。一个常见的需求是发送表单数据或者文件上传。在这种情况下，我们需要使用 FormData 对象来处理请求数据。

然而，和 JSON 数据不同，FormData 并不是一个普通的 JavaScript 对象，因此在使用 Axios 发送 FormData 请求时需要特别注意一些细节。本文将详细介绍如何正确地使用 Axios 发送 FormData 请求。

创建 FormData 对象

首先，我们需要创建一个 FormData 对象，并向其中添加表单字段。下面是一个示例代码：

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

在上面的代码中，我们使用 new FormData() 创建了一个新的 FormData 对象，并使用 append() 方法向其中添加了两个字段：name 和 email。

发送 Axios 请求

创建 FormData 对象后，我们可以使用 Axios 发送请求。下面是一个发送 POST 请求的示例代码：

axios.post('/api/submit', formData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  })

在上面的代码中，我们使用 axios.post() 方法发送了一个 POST 请求到 /api/submit 接口，并传递了 formData 对象作为请求体。

设置请求头

由于 FormData 不是一个普通的 JavaScript 对象，Axios 默认将请求体的 Content-Type 设为 multipart/form-data。但有时候，服务器需要显式指定 Content-Type 为 application/json。为了解决这个问题，我们需要手动设置请求头：

axios.post('/api/submit', formData, {
  headers: { 'Content-Type': 'application/json' }
})

在上面的代码中，我们使用 headers 选项设置了请求头的 Content-Type 为 application/json。

接收 FormData 请求

在服务器端接收 FormData 请求时，需要使用对应的后端框架或库进行处理。具体的处理方式取决于你所使用的后端技术栈。

在 Node.js 中，你可以使用 multer 模块来处理 FormData 请求。以下是一个使用 Express 框架和 multer 来处理 FormData 请求的示例代码：

const express = require('express');
const multer = require('multer');
const app = express();

// 设置存储路径和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

// 创建 multer 实例
const upload = multer({ storage });

app.post('/api/submit', upload.single('file'), (req, res) => {
  console.log(req.body);  // FormData 字段可以通过 req.body 获取
  console.log(req.file);  // 文件可以通过 req.file 获取

  res.send('Success');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在上面的代码中，我们使用 multer 模块来处理 FormData 请求。通过使用 upload.single('file') 方法，我们指定单个文件的字段名为 file。通过 req.body 和 req.file 可以获取 FormData 字段和上传的文件。

结论

Axios FormData 是处理表单数据和文件上传的常用方法。在使用 Axios 发送 FormData 请求时，我们需要特别注意正确设置请求头和服务器端的请求处理。

希望本文对你理解 Axios FormData 的使用有所帮助！