记录一次上传文件,file文件有,但是formData一直为空的问题

1,axios请求有两种方式,第一种

asiox.post(…)

axios({
url: this.url,
method: “POST”,

})

然后我不管用什么东西获取文件,最后肯定是有一个file对象,咱们拿到file对象,进行如下操作

const formData = new FormData();
formData.append("file", file);

总的来说,就是生成一个formData对象,然后进行上传嘛

好,懂得都懂,接下来,脑子有时候短路真可怕
情况:
正常上传参数如下,有一个二进制文件
在这里插入图片描述
犯傻的情况: 我不止有这个参数,我还需要一个标识token,然后我就写成了
在这里插入图片描述
。。。。。其实formData就是一个对象,我们直接放里面就可以,比如下面这样
在这里插入图片描述
是的,我犯了2个错误,
第一是将请求题下意识认为是data对象带数据,
第二是请求头,当data对象的post请求,默认请求头不会设置为form-data
引以为戒。。。。。。。。。。。。。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中上传文件时,通常会将文件转换为FormData类型,并将其作为请求参数发送到后端接口。然而,在某些情况下,接口接收到的FormData对象可能为空对象。有几种可能的原因和解决方法: 1. 检查前端代码:首先需要确保在Vue组件中正确获取到文件对象。可以通过监听文件选择的事件(如change)或手动选择文件后,使用input元素的`files`属性来获取文件对象。确保获取到的文件对象不为null。 2. 检查axios请求配置:在发送axios请求时,需要配置请求头和数据格式,确保FormData对象正确传递。在axios配置对象中添加`headers`属性,设置`Content-Type`为`multipart/form-data`,并传递FormData对象作为请求数据。 3. 检查后端接口:确保后端接口对FormData类型的请求参数进行正确处理。在后端接口中,需要使用适当的方式来解析和处理FormData对象。具体的处理方式可能因后端框架而异,可以查看框架文档了解如何正确解析FormData。 4. 检查接口返回结果:如果接口返回的FormData对象仍为空对象,可能是因为后端接收到的请求参数与预期不符。可以在后端接口中打印请求参数,或使用调试工具查看接口请求和返回数据,以确定问题所在。 总之,上传文件时出现FormData转换为空对象的问题可能是由于前端代码、请求配置、后端接口或返回结果等多个方面引起的。通过逐一排查、调试和对比前后端代码,可以解决这个问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值