当前位置: 首页 > 后端技术 > Java

排查我的前端vue无法向后端传输文件的问题

时间:2023-04-02 00:32:29 Java

原因是公司需要修改原有的创建数据的接口。前端vue传输数据的时候,也需要携带一个附件。改造前代码实现letdata={tenantId:this.searchData.entNum,channelId:this.searchData.entChannelCode,refundList:this.transMakeRefundList}this.API.saveRefundList(data).then(res=>{})把前端数据放在数据对象中exportfunctionjsonPost(url,data={}){returnhttp({method:'POST',url:url,data:data,headers:{'Content-Type':'application/json'}})}saveRefundList()使用的是JSONPOST方法,作为json数据传递给后台@PostMapping("/saveRefundList.do")publicResultContextsaveRefundList(@RequestBodyTransactionGenerateRefundReqreq){}java后端使用RequestBody接收json数据想再上传一个文件,文件不能用json传输,需要改成form,后台不能用RequestBody接收form数据,应该用RequestParam来接收并修改letformData=newFormData()formData.append('tenantId',this.searchData.entNum)formData.append('channelId',this.searchData.entChannelCode)formData.append('refundList',this.transMakeRefundList)formData.append('文件',this.file)this.API.saveRefundList(formData).then(res=>{})vue这里把data对象换成一个form对象,然后把之前的数据和一个文件添加到form中,传form导出函数filePost(url,data={}){returnhttp({method:'POST',url:url,data:data,headers:{'Content-Type':'multipart/form-data'}})}在传输过程中使用表单数据传输表单@PostMapping("/saveRefundList.do")publicResultContextsaveRefundList(@RequestParam(value="tenantId",required=false)StringtenantId,@RequestParam(value="channelId",required=false)ObjectchannelId,@RequestParam(value="refundList",required=false)ListrefundList,@RequestParam(value="file",required=false)MultipartFilefile){}java后端接收,使用RequestParam接收前端传输形式测试结果,这就很尴尬了。MultipartFile文件接收不到前台传来的数据,甚至其他参数也接收不到。第一步是定位问题。第一步之前,我也在之前的公司写过前后台传输文件的代码。以前的后端很好。能收到文件,直接断定是vue的问题。F12打开后查看请求数据、地址、内容。太丢脸了。vue好像没有问题。第二步不死心,继续用postman测试是不是vue的问题,模拟请求数据,传到后端,还是收不到,那就确实是后端的问题。第三步,查看后台代码。我真的看不出有什么问题。然后就去百度了下前后端文件交互方式。确实是这样写的。第四步,我直接建了一个前后端工程,发现可以通过。.....这太尴尬了。定位到问题后,原来是有人在java后端工程中添加了如下配置。spring.servlet.multipart.enabled=false我吐了。springboot默认配置为true。之前不知道有这种东西可以控制前后端文件的交互,所以就学习了。