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

本文详细记录了在Vue项目中使用axios上传文件遇到的三个常见错误及其解决方案。错误包括:请求不是multipart请求、找不到多部分边界、请求部分缺失。解决方法涉及设置Content-Type、使用FormData、避免axios自动修改headers以及确保前后端参数匹配。同时,强调了使用FormData的便利性和重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

报错信息

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

### 前端文件上传错误分析 当遇到 `Current request is not a multipart request` 的错误时,通常是因为服务器期望接收的是一个多部分表单请求 (`multipart/form-data`),而实际发送的请求不符合这一格式。以下是可能的原因及其解决方案: #### 可能原因及解决方法 1. **未设置正确的 Content-Type** 如果前端在发起文件上传请求时,未正确设置 HTTP 请求头中的 `Content-Type` 为 `multipart/form-data`,则可能导致此错误。大多数情况下,现代框架会自动处理这一点,但如果手动设置了不恰当的内容类型,则需要修正。 ```javascript const formData = new FormData(); formData.append('file', fileInput.files[0]); fetch('/upload-endpoint', { method: 'POST', body: formData, headers: { // 不要显式指定 content-type,浏览器会自动生成合适的 multipart boundary // 'Content-Type': 'multipart/form-data', // 删除这行 }, }); ``` 2. **未使用FormData对象** 文件上传应通过 JavaScript 中的 `FormData` 对象来构建数据包。如果直接传递 JSON 或其他形式的数据结构给服务器,可能会引发该问题。 ```javascript const formData = new FormData(); // 使用 FormData 构建多部分表单 formData.append('file', document.getElementById('file-input').files[0]); ``` 3. **后端配置问题** 后端服务可能未正确定义如何解析 `multipart/form-data` 类型的请求体。例如,在 Spring Boot 应用程序中,需确保控制器方法参数中标记了 `@RequestParam("file") MultipartFile file` 并启用了相应的依赖项[^1]。 4. **网络拦截器或代理干扰** 若项目中有全局 Axios 配置或其他中间件修改了原始请求(如添加额外头部),也可能破坏默认行为并导致上述异常。检查是否存在类似的逻辑影响正常流程。 5. **测试工具配置不当** 当利用 Postman 测试 API 接口时,务必选择 Body -> form-data 而不是 raw/json 格式的输入方式[^2]。 --- ### 关于 Spot 实例的选择建议 对于提到的应用场景——即追求经济实惠又可接受一定范围内的中断时间—Amazon Web Services (AWS) 提供了几种不同类型的弹性计算云(EC2)实例选项。其中 spot instances 是按需容量市场价格波动定价的一种资源形态;它们允许客户以显著低于标准预留实例的价格运行工作负载,前提是能够容忍由于供给紧张而导致的任务终止风险[^3]。 因此针对题目描述的需求,“spot”应当作为首选方案之一考虑进去。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值