ios文件上传错误怎么办（axios上传文件错误：Current request is not a multipart request）

报错信息

其实整个过程我一共经历了三个报错信息              ，分别是

1.Current request is not a multipart request：当前请求不是multipart 请求

2.the request was rejected because no multipart boundary was found：请求被拒绝
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，因为未找到多部分边界

3.Required request part ‘files’ is not present

报错产生的程序

我是想在vue中实现一个上传文件的功能













，采用axios方式上传  
  
  
  
  
  
  ，数据模式采用formdata              。

然后就产生了各种错误
 
  
 
  
 
  
 
  
 
  
 
  
 
 。

错误解决

Current request is not a multipart request：

这个错误是因为后端读取MultipartFile 类型数据时 
  
  
  
  
  
  
 ，对申请头的类型进行了一个判断


 


 


 


 


 


 


，他只识别 multipart 开头的 Content-Type













。所以我们需要修改headers 的 Content-Type  
  
  
  
  
  
  。

但是手动添加headers会产生 第二个错误 
  
  
  
  
  
  
 。所以建议使用formdata 的方式 
 
 
 
 
 
 ，参数为formdata 时  
   
   
   
   
   
   
 ，浏览器会自动添加一个标准的headers


 


 


 


 


 


 


。

错误：会引发新的错误

var request({ url: 地址, method: post, headers:{Content-Type: multipart/form-data}, data: formdata, })

正确：

let format = new window.FormData(); format.append("file",files[0].raw) let res = await api.test(format) var options({ url: 地址, method: post, data: formdata, }) axios(options).then((res) => {console.log(res)})

当然要保证format的key要和后端接收参数的名称保持一致

 

 

 

 

 

 

，不然会引发第三个错误 
 
 
 
 
 
 。

（对了
 

 

 

 

 

 

 ，正常 let format = new FormData();就可以              ，但一些vue情况下可能会报错找不到FormData 
 

 
 

 
 

 
 

 
 

 
 

 
 

，就可以试试new window.FormData();）

新的问题

正常情况下此时浏览器会自动修改headers的Content-Type












，但是我的请求头的类型依旧没有变化                     ，经过进一步研究
 
 
 
 
 
 
 
 
 
 
 
 
 
，发现axios在请求发送出去之前会进行一次拦截



















，自动给我们的请求设置一些参数  
   
   
   
   
   
   
 。所以我们需要修改一下不让它在修改

 

 

 

 

 

 

。最重结果为

let format = new window.FormData(); format.append("file",files[0].raw) let res = await api.test(format) var options({ url: 地址, method: post, data: formdata, transformRequest: [function(data, headers) { // 去除post请求默认的Content-Type delete headers.post[Content-Type] return data }], }) axios(options).then((res) => {console.log(res)})

2.the request was rejected because no multipart boundary was found

这是因为正常的 Content-Type是这样的

Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywdz99kUqBwK48chO

后面会有一个自动生成的boundary来作为分隔符,而人工写的是没有的              ，也很难人工生成
 

 

 

 

 

 

 。

所以如果想使用multipart/form-data 的话
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，建议不要人工添加













，使用FormData 是较好的办法              。

3.Required request part ‘files’ is not present

这个问题有很多可能性  
  
  
  
  
  
  ，其中最常见的就是

public void upload(@RequestParam("files") MultipartFile file) throws Exception { System.out.println(file.getOriginalFilename()); } let format = new window.FormData(); format.append("file",files[0].raw)

后端接受文件的名称和前端formdata的key键不相同 
  
  
  
  
  
  
 ，修改为相同就好
 

 
 

 
 

 
 

 
 

 
 

 
 

。

其他还有可能是前端传参问题


 


 


 


 


 


 


，参数可能并没有传送到后端 
 
 
 
 
 
 ，或者也可能是因为Content-Type的不同导致读取文件方式不同












。

我产生这个报错是因为Content-Type 不是’multipart/form-data’  
   
   
   
   
   
   
 ，但是无法通过RequestParam方法获得formdata中的数据（接收和传入的参数不是文件类型）                     。