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

文章出处：Jiangkuobo，微信：jkb_267460

文章目录

前言一、使用elementPlus上传图片，出现的问题。二、验证猜想1.验证方式：2.测试结果：3.我的猜想与验证三、关于elementPlus组件上传文件限制大小的解决方法四、新的问题1.spring报错：2.解决方式：总结

前言

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

一、使用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