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-Typedelete 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中的数据(接收和传入的参数不是文件类型)。
axios上传文件错误:Current request is not a multipart request相关推荐
- axios 上传文件_聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传...
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...
- axios 上传文件 封装_axios封装和传参
axios封装和传参 1.开发环境 vue+typescript 2.电脑系统 windows10专业版 3.在开发的过程中,我们会经常使用到 axios进行数据的交互,下面我来说一下,axios封装 ...
- SSH Secure File Transfer上传文件错误:encountered 1 errors during the transfer解决办法
在使用SSH 工具向Linux服务器上传文件时,弹出 encountered 1 errors during the transfer 错误. 解决方案: 1.准备上传的那个文件所在目录路径存在(), ...
- QQ浏览器使用axios上传文件为空的问题
记录一下这几天费尽心力解决的一个bug,关于axios库的. 这是我使用antd库的Input组件自定义的上传函数 这是上传的文件,这里嵌入了一个裁剪的小插件clipic,问题发生在裁剪完成之后,在下 ...
- axios 上传文件 封装_axios 封装【满足常规数据上传及file上传】
axios 封装[满足常规数据上传及file上传] request.js /* 封装axios */ const axios = require('axios'); import { featchAp ...
- 关于在node.js 中使用formData 发送axios上传文件失败解决方案
最近用到了node.js进行文件上传到其他服务器,在使用formData 上传时候遇到对方接口处理失败问题 问题原因 因为node.js 中 axios 没法识别 Content-Type 设置,所以 ...
- wordpress上传文件报错的解决方法(413 Request Entity Too Large、超过upload_max_filesize文件中定义的php.ini值)
报错:413 Request Entity Too Large 问题nginx是限制上传大小,解决方法如下: 打开nginx配置文件 nginx.conf, 路径一般是:/etc/nginx/ngin ...
- ios腾讯云文件服务器,使用axios 上传文件到腾讯云
在网上看到的好多的都是使用七牛的,花了一点时间看了下腾讯的. 不管那个云服务都是 客户端通过自己的key 进行加密,服务器解密 查看是否有资格,然后进行传输. 使用腾讯云的对象存储. 整个流程: 腾讯 ...
- vue+axios上传文件的几种方式及步骤(以上传图片为例)
1.用js的formData对象上传(服务器返回url地址) <input class="file" name="file" type="fil ...
最新文章
- 数据库连接池为什么要用threadlocal呢?不用会怎样?
- 人人都是 DBA(V)SQL Server 数据库文件
- 调用webservice查询手机号码归属地信息
- Windows下安装tensorflow-gpu/cpu教程
- VTK:相互作用之Game
- linux band0 手动重启,linux相关知识整理(4)
- three.js制作3d模型工具_3D打印模型打磨抛光常用工具
- linux ubuntu php,linux ubuntu安装php运行环境
- (递归7)生成可重集的排列
- matlab:蚁群算法原理的实现
- Excel怎么做均值-极差控制图
- std::ios_base::fmtflags orig std::streamsize prec
- 排列组合(组合C语言实现)
- jQuery下载安装详细教程,jQuery入门必备
- 2022-02-23 安卓开发七年面试题总结
- 【笔记】python中常见的函数(一)
- 3D语音天气球(源码分享)本文出自大苞米的博客(http://blog.csdn.net/a396901990)
- Spring入门(二):自动化装配bean
- 可由一个尾指针唯一确定的链表有_可由一个尾指针唯一确定的链表有________、________、________。...
- 基于Ovito的团簇识别分析
热门文章
- 公安机关互联网安全监督规定检查规定解决方案
- AGC中振幅与dB的转换关系
- html如何制作一个手机商城网页通栏
- Python 动态抓取 Android 进程内存信息 数据可视化
- 使用PongoOS读取苹果ARM64 CPU功能支持寄存器
- VS报错:未能加载项目文件。未能找到路径
- 【Oracle 12c Flex Cluster专题】—节点角色转换
- linux 下视频编辑软件下载,在Linux系统中下载和安装Shotcut视频编辑工具
- 使用开源免费的shotcut 做视频编辑功能,和视频合并功能。感觉上和mac上面的imove 类似。开源项目星星比较多。
- #物联网感知实验#proteus仿真入门