前言

最近在做一个后台管理系统时，上传图片没有正常上传成功，总结一下其中遇到的问题，和解决方式。-------关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。

一、使用elementPlus上传图片，出现的问题。

问题描述：在使用vue3时，同学们大部分会毫不犹豫选择elementPlus作为项目UI插件库，我在使用其中的upload组件时，发现我在pc端测试上传完图片是正常加载显示图片的，而我用手机测试上传图片并没成功显示。

所以我猜想出现bug的原因应该是如下两个：
1.element plus插件中的upload组件上传功能在移动端不适配。
2.upload插件对于手机端作了限制。

二、验证猜想

1.验证方式：

由于前端在手机端无法很好的看到调试输出的日志，我就把接受前端请求的数据放在Java后台，我在请求入口打印日志，查看前台上传文件时是否发送了请求。

2.测试结果：

手机端上传，并没有发送请求。特别奇怪，明明前端写的没有问题，电脑都能上传成功。正当我为之烦恼时，我再手机上上传一张很小的缩略图，没想到上传成功了，此时我已经发现新大陆了。

3.我的猜想与验证

我大概明白了，由于我手机大部分图片都是拍照的图片，尺寸特别大，随便一张就是3~8M，我明确了，是elementplus插件对上传的文件大小做了限制。于是我在电脑端也上传了一张5M的图片，同样也失败了，证明我的猜想是成立的。

三、关于elementPlus组件上传文件限制大小的解决方法

我找到官方文档，其中有一个before-upload的api，这个api是对于上传文件做预处理的一个函数。

所以我写了一个解除文件大小校验的限制，我设置最大尺寸为5M
代码如下（示例）：

<el-uploadaccept="image/*"class="upload-demo"action="http://192.168.1.101:8084/api/public/v1/product/oss":on-success="handleAddSuccess":before-upload="beforeImageUpload"><el-button type="primary">上传</el-button><div><imgv-if="addForm.productBigLogo":src="addForm.productBigLogo"class="avatar"/><i v-else class="el-icon-plus avatar-uploader-icon" /></div></el-upload>

//主要的逻辑是这个
const beforeImageUpload = (rawFile) => {if (rawFile.size / 1024 / 1024 > 5) {ElMessage.error("Avatar picture size can not exceed 5MB!");return false;}return true;};

四、新的问题

1.spring报错：

解决了前端限制上传大文件的问题之后，后台能接受的请求了，但是同样出现了，大小超出限制的问题。来看看报错。

2.解决方式：

根据上面图片的报错信息，不难发现，也是文件大小超出限制，查看spring boot官方文档，原来Spring Boot工程嵌入的tomcat限制了请求的文件大小，这一点在Spring Boot的官方文档中有说明，档说明表示，每个文件的配置最大为1Mb，单次请求的文件的总数不能大于10Mb。要更改这个默认值需要在配置文件（如application.properties）中加入两个配置

我用的是yml ，代码如下（示例）：

spring:servlet:multipart:max-file-size: 100MBmax-request-size: 1000MB

总结

关于此次上传文件的总结。：
以上就是今天要讲的内容，本文仅仅简单介绍了elementPlus解除文件限制大小上传的方法，和springboot修改multipart限制文件大小的方法，还是需要多多积累。

关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。相关推荐

WinSCP上传文件的时候，报copying files to remote side的解决办法
今天我用winSCP 上传文件的时候,总是报copying files to remote side 的错误,并且上传后的文件大小为0 出现这种错误一般来说是因为服务器空间已经被占满了,于是我用用Li ...
layui表单加文件 php_layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例...
本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作.分享给大家供大家参考,具体如下: layui框架是1.0.9版本.. 首先html页面代码如下: js代码如下: l ...
在html中上传文件，后台获取并进行操作
HTML中上传文件在Web项目中有许多需求,项目过后对大批零散的碎片记录笔记. 此篇笔记内容为:在Html中上传文件,后台获取来操作的需求. 1.表单提交前端: from标签上一定要添加encty ...
介绍一个工具给大家，做网站时，经常要上传文件到外网服务器，但是上传时往往需要很长时间，如果有一个文件对比工具……...
介绍一个工具给大家,做网站时,经常要上传文件到外网服务器,但是上传时往往需要很长时间,如果有一个文件对比工具, 可以对比每次版本有什么文件变化,并单独找出来.这样只需要上传需求的文件就可以达到版本更新 ...
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法
近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中 ...
Xftp 传文件到虚拟机一直显示状态错误，传不进去
Xftp 传文件到虚拟机一直显示状态错误,传不进去环境:VMware.Ubuntu18.04 1.起因用Xshell连接了虚拟机,想用Xftp从本地Windows环境传文件到虚拟机的Ubuntu中 ...
android和ios传文件怎么打开方式,安卓怎么给iPhone传文件？文件互传教程
大家使用手机的时候肯定都会用到蓝牙或者互传文件功能,安卓和安卓手机直接传文件非常简单方便,那么安卓怎么给iPhone传文件呢?小编下面就给大家带来安卓和iPhone文件互传教程. 说道文件互传,大家肯 ...
[前台]---js重复上传一张图片两次,第二次失败的解决办法和思路
js重复上传一张图片两次,第二次会失败,解决办法就是修改input的value值. 先上代码: <input style="display:none" type=" ...

关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。

文章目录

前言