Axios 中的文件上传（Upload File）方法

Axios 提供了多种上传文件（Upload File）的方法，实用于不同的上传场景。以下是其中几种常用的方法：

1. 1. 使用 FormData 对象

复制代码

FormData是一个用于创建表单数据的 API，可用于发送包含文件和其他表单数据的multipart/form-data哀求。这是处置惩罚文件上传的常用方法。通过FormData对象，可以将文件数据添加到表单中，然后使用 Axios 的post或put方法发送哀求。
示例

1. const axios = require('axios');
3. const fileInput = document.querySelector('#fileInput');
4. const file = fileInput.files[0];
6. const formData = new FormData();
7. formData.append('file', file);
9. axios.post('/upload', formData, {
10.   headers: {
11.     'Content-Type': 'multipart/form-data'
12.   }
13. }).then(response => {
14.   console.log('上传成功', response.data);
15. }).catch(error => {
16.   console.error('上传失败', error);
17. });

复制代码

项目中使用

1. onChange={async (info: any) => {
2.                 const formData = new FormData();
3.                 const fileList = info.fileList;
4.                 fileList.forEach((file: any) => {
5.                     formData.append("file", file.originFileObj);
6.                 });
7.                 localStorage.setItem('fileName', fileList[0].name)
8.                 axios.post('http://xxx.xxx.x.xx:8000/upload', formData,
9.                     {
10.                         headers: {
11.                             'Content-Type': 'multipart/form-data'
12.                         }
13.                     })
14.                     .then(res => {
15.                         if (res) {
17.                         }
18.                     })
19.             }}

复制代码

2. 使用 URL 参数

除了使用FormData，你还可以通过在 URL 参数中指定文件名的方式上传文件。这种方法实用于后端盼望文件名直接出现在 URL 中的情况。

1. const axios = require('axios');
3. const fileInput = document.querySelector('#fileInput');
4. const file = fileInput.files[0];
6. axios.post('/upload', file, {
7.   params: {
8.     fileName: file.name
9.   }
10. }).then(response => {
11.   console.log('上传成功', response.data);
12. }).catch(error => {
13.   console.error('上传失败', error);
14. });

复制代码

3. 使用 Base64 编码

这种方法将文件转换成 Base64 编码的字符串，然后通过普通的 JSON 格式发送给服务器。这种方式实用于较小的文件，因为 Base64 编码会增长数据巨细。

1. const axios = require('axios');
3. const fileInput = document.querySelector('#fileInput');
4. const file = fileInput.files[0];
6. const reader = new FileReader();
8. reader.onload = function(event) {
9.   const base64Data = event.target.result.split(',')[1];
11.   axios.post('/upload', {
12.     file: base64Data
13.   }).then(response => {
14.     console.log('上传成功', response.data);
15.   }).catch(error => {
16.     console.error('上传失败', error);
17.   });
18. };
20. reader.readAsDataURL(file);

复制代码

4.发送文件 Blob 对象

可以通过 CreateObjectURL 把文件对象转成 Blob URL，然后作为 Axios 哀求的数据发送。

1. const file = document.getElementById('file').files[0];
3. const blobUrl = URL.createObjectURL(file);
5. axios.post('/upload', blobUrl, {
6.   headers: {
7.     'Content-Type': 'multipart/form-data'
8.   }  
9. });

复制代码

使用说明文档

https://apifox.com/apiskills/axios-upload-file/

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。