关于前端上传文件报错，文件大小超出限制，导致无法上传

使用element / elementPlus上传图片，出现的问题。

前言

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

一、使用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 代码如下（示例）：

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

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