axios 上传图片|文件

最新推荐文章于 2024-08-21 04:35:59 发布

fengyehongWorld

最新推荐文章于 2024-08-21 04:35:59 发布

阅读量9.9k

点赞数 6

分类专栏： # JS # React 文章标签： javascript

本文链接：https://blog.csdn.net/feyehong/article/details/123081540

版权

JS 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

React

8 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用axios库来上传一个包含多个图片和文件的FormData对象到后端接口。它首先创建一个FormData实例，然后遍历临时文件列表并将每个文件添加进去。最后，设置请求头为'Content-Type': 'multipart/form-data'并发送POST请求。

摘要由CSDN通过智能技术生成

import axios from 'axios';

// 存储文件对象的List
const tempFiles = [图片1, 图片2, 文件1, 文件2];

// 构建FormData对象,通过该对象存储要上传的文件
const formData = new FormData();
// 遍历当前临时文件List,将上传文件添加到FormData对象中
tempFiles.forEach((item) => formData.append('file', item.file));

// 调用后端接口,发送请求
const res = await axios.post('/后台的接口地址', formData, {
  // 因为我们上传了图片,因此需要单独执行请求头的Content-Type
  headers: {
    // 表示上传的是文件,而不是普通的表单数据
    'Content-Type': 'multipart/form-data'
  }
})