详解axios中multipart/form-data的使用

一、multipart/form-data的介绍

在网络传输中，multipart/form-data是一种HTTP的编码方式，用于在web表单中传输二进制数据文件。 它使用 boundary 字符串来区分上传文件的不同部分，一般用——WebKitFormBoundary随机数来标记不同的内容。multipart/form-data此种格式的数据比常见的 application/x-www-form-urlencoded 格式多出了 boundary 字段的格式。这种标记方法很大程度上就解决了对文件格式传输的问题。

boundary的计算规则
boundary=前缀随机数(其中前缀为"-------------------------"，后面的随机数是由前缀和当前时间戳组成的字符串)
　　其中：前缀的长度是26个"--"

二、使用axios的multipart/form-data

axios是一个基于Promise的HTTP请求客户端，可同时在浏览器和node.js中使用。它支持请求和响应的拦截器、请求数据和响应数据的转换、取消请求、自动转换JSON数据、客户端状态和cookie（以浏览器为例）管理等功能。在处理multipart/form-data格式数据时，我们需要在请求中添加headers和data两个属性。

实例

headers:{
  'Content-Type': 'multipart/form-data'
}

data:formData

其中，headers设置Content-Type为multipart/form-data，data是拼接好的表单数据。formData 是 FormData 类型的一个实例。 在FormData实例对象中，我们可以通过对append方法的调用增加表单项。

三、上传文件的示例代码

Step 1 ：index.html的文件标签配置

<form enctype="multipart/form-data" method="POST">
  <input type="file" name="image" />
</form>

Step 2 ：编写脚本进行文件上传

const formData = new FormData()
formData.append('image', fileInputElement.files[0])

axios.post('/image/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  // handle success
})
.catch(error => {
  // handle error
})

在formData中使用append方法来添加表单项，将要上传的文件（本例中是一个单选文件input框）添加到表单项中，设置请求的headers中的Content-Type和data为formData。这样就可以通过axios的post方法向服务器端请求上传文件了。

四、使用axios上传多个文件

对于需要上传多个文件的监听，可以通过fileInput的多选属性实现，将fileInput设置为multiple即可。

示例代码

const formData = new FormData()
formData.append('image1', fileInputElement1.files[0])
formData.append('image2', fileInputElement2.files[0])

axios.post('/image/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  // handle success
})
.catch(error => {
  // handle error
})

五、使用axios上传文件&其他参数

除了上传文件以外，表单中还可能包含其他非文件的参数。可以在formData中使用同样的方法添加非文件表单项。

示例代码：

const formData = new FormData()
formData.append('username', 'tom')
formData.append('password', '123456')
formData.append('image1', fileInputElement1.files[0])

axios.post('/image/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  // handle success
})
.catch(error => {
  // handle error
})

六、结论

本文通过介绍multipart/form-data格式的数据传输、使用axios上传单个/多个文件和实现上传文件&其他参数，详细讲解了axios中multipart/form-data的使用，同时为开发者提供了一种具有实用性的对应数据传输的思路和实现方式。