文章出处:Jiangkuobo,微信:jkb_267460
文章目录
前言
最近在做一个后台管理系统时,上传图片没有正常上传成功,总结一下其中遇到的问题,和解决方式。-------关于前端上传文件到后台,文件大小超出限制,导致上传失败的解决办法。
一、使用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-upload
accept="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>
<img
v-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: 100MB
max-request-size: 1000MB
总结
关于此次上传文件的总结。:
以上就是今天要讲的内容,本文仅仅简单介绍了elementPlus解除文件限制大小上传的方法,和springboot修改multipart限制文件大小的方法,还是需要多多积累。