axios上传文件错误：Current request is not a multipart request

Posted 2023-04-03 obscure mood

报错信息

其实整个过程我一共经历了三个报错信息，分别是
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中的数据（接收和传入的参数不是文件类型）。

React Native Fetch / Axios文件上传错误

【中文标题】React Native Fetch / Axios文件上传错误

【英文标题】：React Native Fetch/ Axios file upload error

【发布时间】：2021-05-20 08:35:30

【问题描述】：

我在尝试将图像从 React-Native android 模拟器上传到服务器时遇到问题，如果您遇到此问题并已解决，请指出答案或写下答案。

const data = new FormData();
  data.append('file', 
    uri: file.src.uri,
    name: file.src.name,
    type: file.src.type,
  );
  data.append('documentType', file.id);
   // axios(
  //   method: 'post',
  //   url: API_URL + '/users/' + user.id + '/uploadDocument',
  //   body: data,
  //   headers: 
  //     'Content-Type': 'multipart/form-data; ',
  //   ,
  // )
  fetch(API_URL + '/users/' + user.id + '/uploadDocument', 
    method: 'POST',
    headers: 
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
    ,
    body: data,
  )
    .then(async (res) => 
      console.log(res);
      if (res.status === 200) 
        Toast.show(
          text: 'Profile Document Uploaded Successfully',
          position: 'top',
        );
       else 
        Toast.show(
          text: 'There was an error uploading',
          position: 'top',
        );
      
    )
    .catch((err) => 
      console.log('Profile img upload err', err.message);
      Toast.show(
        text: 'Unable to upload profile document',
        position: 'top',
      );
    );

这是 Fetch 的响应-

"_bodyBlob": "_data": "__collector": [对象], "blobId": "85366f42-0bb9-48e0-81f6-fb516a41efb3", "offset": 0, "size": 244 ，“_bodyInit”：“_data”：“__collector”：[对象]，“blobId”：“85366f42-0bb9-48e0-81f6-fb516a41efb3”，“offset”：0，“size”：244， "bodyUsed": false, "headers": "map": "access-control-allow-headers": "x-requested-with, authorization,Content-Type", "access-control-allow-methods": “POST、GET、OPTIONS、DELETE、PUT”、“access-control-allow-origin”：“*”、“access-control-max-age”：“3600”、“cache-control”：“无缓存” , no-store, max-age=0, must-revalidate", "content-type": "application/json;charset=UTF-8", "date": "2021 年 2 月 17 日星期三 12:34:59 GMT ", "expires": "0", "pragma": "no-cache", "server": "nginx/1.12.1", "x-content-type-options": "nosniff", "x-frame -options": "DENY", "x-xss-protection": "1; mode=block", "ok": false, "status": 400, "statusText": undefined, "type": "default ", "url": "https://xxxxxx.yyyyyy.in/users/422/uploadDocument"

Axios 失败并显示 400 或 500 错误代码

【参考方案1】：

我相信如果没有来自服务器的更多信息，很难判断错误是什么。 400 Bad Request 错误表示您发送的有效负载存在问题。可能是文件 mime 类型或内容本身。

500 Internal Error 响应可能表明您发送的内容导致服务器端异常（主要是因为服务器编码不当，无法处理不正确的负载）。

【讨论】：

谢谢，后端的错误提示信息也不清楚，所以我尝试了Fetch。