文章出处：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限制文件大小的方法，还是需要多多积累。