关于java:关于我前端vue无法传文件到后端问题排查

4次阅读

共计 1869 个字符,预计需要花费 5 分钟才能阅读完成。

起因

公司业务要对原本一个创立数据的接口革新,前端 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,以前都不晓得有这么个货色管制前后端文件交互,学到了学到了。

正文完
 0