axios中的header中的content-type改为'multipart/form-data_mob649e8161c39d的技术博客_

使用axios发送multipart/form-data格式的请求

在前端开发过程中，我们经常需要通过HTTP请求向后端发送数据。axios是一个流行的HTTP客户端库，它提供了简单易用的API来发送各种类型的请求。默认情况下，axios的请求header中的content-type为'application/json'，但有时我们需要发送multipart/form-data格式的请求，本文将介绍如何在axios中配置content-type为'multipart/form-data'并发送该类型的请求。

multipart/form-data是什么？

在介绍如何使用axios发送multipart/form-data格式的请求之前，让我们先了解一下multipart/form-data是什么。multipart/form-data是一种HTTP请求体的编码格式，常用于上传文件或提交表单数据。该格式将请求体划分为多个部分，每个部分包含一个数据字段和相关的数据。

使用axios发送multipart/form-data格式的请求

在axios中，我们可以使用FormData对象来生成multipart/form-data格式的请求体。首先，我们需要创建一个FormData对象，并将需要发送的数据添加到该对象中。然后，我们可以使用axios的post方法来发送请求，并将FormData对象作为请求体传递。最后，我们可以通过设置header的content-type为'multipart/form-data'来指定请求体的格式。

以下是一个使用axios发送multipart/form-data格式请求的代码示例：

const axios = require('axios');
const formData = new FormData();
formData.append('name', 'John');
formData.append('age', 30);
formData.append('avatar', avatarFile);
axios.post('/api/user', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  .then(response => {
    console.log(response.data);
  .catch(error => {
    console.error(error);
在上面的代码中，我们首先创建了一个FormData对象，并使用append方法将需要发送的数据添加到该对象中。其中，name和age是普通的文本字段，而avatar是一个文件字段，我们可以通过input[type="file"]元素获取用户选择的文件，并将其赋值给avatarFile变量。
然后，我们使用axios的post方法发送请求。第一个参数是请求的URL，第二个参数是请求体，我们将FormData对象作为请求体传递。第三个参数是一个配置对象，我们在其中设置了content-type为'multipart/form-data'。
最后，我们可以通过then方法获取请求的响应数据，或通过catch方法捕获请求的错误。
本文介绍了如何使用axios发送multipart/form-data格式的请求。通过创建一个FormData对象，并将需要发送的数据添加到该对象中，然后使用axios的post方法发送请求，并设置header的content-type为'multipart/form-data'，我们可以轻松地发送该类型的请求。希望本文对你理解如何在axios中发送multipart/form-data请求有所帮助！
                            org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;bounda
                             最近在做一个图片上传，遇到这了这种情况，在入参 body 中同时传入文件和其它参数信息结果出现如题异常。 特别在此记录解决办法，以供大家参考。 @PostMapping("/app")public ResponseEntity<Integer> createApplication(@RequestB ...