起因
公司业务要对原本一个创立数据的接口革新,前端vue传输过去数据的同时,还要携带一个附件。
革新前代码实现
let data = { tenantId: this.searchData.entNum, channelId: this.searchData.entChannelCode, refundList: this.transMakeRefundList } this.API.saveRefundList(data).then(res => { })
前端数据放在data对象外面
export function jsonPost (url, data = {}) { return http({ method: 'POST', url: url, data: data, headers: { 'Content-Type': 'application/json' } })}
saveRefundList()外面应用到的是JSONPOST办法,传到后盾的是一个json数据
@PostMapping("/saveRefundList.do") public ResultContext saveRefundList(@RequestBody TransactionGenerateRefundReq req) { }
java后端应用RequestBody接管json数据
思考
我要多传一个文件,文件不能用json传输,须要改成表单,后端也不能用RequestBody接管表单数据,要用RequestParam接管
革新
let formData = new FormData() formData.append('tenantId', this.searchData.entNum) formData.append('channelId', this.searchData.entChannelCode) formData.append('refundList', this.transMakeRefundList) formData.append('file', this.file) this.API.saveRefundList(formData).then(res => { })
vue这边用表单对象替换了data对象,之后把之前的数据,外加一个文件,加进表单,把表单传输
export function filePost (url, data = {}) { return http({ method: 'POST', url: url, data: data, headers: { 'Content-Type': 'multipart/form-data' } })}
传输过程用到了form-data传输表单
@PostMapping("/saveRefundList.do") public ResultContext saveRefundList( @RequestParam(value = "tenantId", required = false) String tenantId, @RequestParam(value = "channelId", required = false) Object channelId, @RequestParam(value = "refundList", required = false) List<TransactionRefundDTO> refundList, @RequestParam(value = "file", required = false) MultipartFile file ) {}
java后端接管,应用RequestParam接管前台传输表单
测试后果
这就很难堪,MultipartFile file接管不到前台传输的数据,连带其余参数也接管不到了
问题定位
第一步
之前我在上一家公司也是写过这前后台传输文件的代码的。以前后端好好的能接管到文件,我间接判定是vue的问题。
F12关上之后查看申请数据,地址,内容都没问题,难堪了,貌似vue没有问题。
第二步
不死心,持续用postman测试是不是vue的问题,模仿了申请数据,传输到后端,还是接管不到,那确实就是后端的问题了。
第三步
后端代码排查,真看不出什么问题,之后去百度前后端文件交互方式,确实是这么写的没错啊
第四步
我间接本人建了个前后端我的项目,发现能传过来......这就究极难堪了
问题定位
起初发现原来是java后端我的项目外面有人加了上面的这个配置,spring.servlet.multipart.enabled=false
我吐了,springboot默认这个配置是true,以前都不晓得有这么个货色管制前后端文件交互,学到了学到了。