前端使用FormData上传多个文件

直上九天揽星辰

已于 2023-03-02 13:39:21 修改

阅读量4.2k

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-03-02 13:36:58 首次发布

本文链接：https://blog.csdn.net/qq_39409541/article/details/129298889

版权

FormData: 文档介绍https://developer.mozilla.org/zh-CN/docs/Web/API/FormData当接口需要文件格式的参数进行文件上传时，前端上传的文件需要使用 FormData

FormData主要作用：网络请求中处理用来异步的上传文件

例如：

前端调用方法如下：

// 创建一个新的 FormData 对象
const files = new FormData();
// fileList 是文件列表
// append方法是向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值
fileList.forEach(file => {
  files.append("files", file);
})

axios({
  method: 'post',
  url: 'http://xxx.cn/import', // 接口地址
  data: files,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(res => console.log(res))
.catch(err => console.log(err))

页面调用结果如下图