axios请求参数以 file: (binary)形式发送

最新推荐文章于 2024-10-23 16:29:07 发布

原创最新推荐文章于 2024-10-23 16:29:07 发布 · 4.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue2 专栏收录该内容

4 篇文章

订阅专栏

在项目中遇到手动上传文件的需求，通过调整axios的Content-Type为multipart/form-data，并使用FormData处理file对象，成功实现了文件上传。关键在于正确设置headers和append文件到formData中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
今天拿到这么一个接口，第一时间有点懵，因为项目涉及到上传文件之类的一直用的是组件库的upload组件去上传，但是这次需要手动去请求，一直上网搜索如何把文件转为二进制去上传，试了好几次都是失败的，终于找到了答案，这里记录下。

参考组件的upload上传参数，可以看到是这样的：
在这里插入图片描述

ok，根据这两个，我们去调整axios请求方式

export const shopCostRecordImport= (params, data) => { return axios({
  method: 'post',
  url: `****`,
  params,
  data,
  headers: {
    'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'
  }
}).then(res => res.data) };

其中，要调整content-type，以及对data数据做处理

const formData = new FormData();
formData.append("file", this.fileList[0].originFileObj) // 这里填入你的file文件对象
let params = {
	month: moment(this.importMonth).format("YYYY-MM"),
	platformId: this.importPlatformId
};
const res = await shopCostRecordImport(params, formData)