Vue + SpringBoot + Nginx上传文件大小修改

📝 笔记：Vue + Spring Boot + Nginx 文件上传大小限制配置

在实际开发中，上传大文件（如图片、视频、压缩包等）是常见的需求。默认情况下，Spring Boot、Nginx 和前端框架 Vue 都会对上传文件大小进行限制，因此需要我们手动调整相关配置。

本文将详细介绍如何在 Vue 前端 + Spring Boot 后端 + Nginx 反向代理 架构下，修改上传文件大小限制，确保整个链路支持大文件上传。

---

✅ 一、修改 Spring Boot 配置文件（application.yml）

Spring Boot 默认允许上传的文件大小为 1MB，超过该大小会抛出异常。我们需要在配置文件中调整上传限制。

🔧 配置项说明：

spring:
  servlet:
    multipart:
      max-file-size: 512MB   # 单个文件最大大小
      max-request-size: 512MB # 整个 HTTP 请求的最大大小（适用于多文件上传）

⚠️ 注意：

• 单位必须为大写，可选值：B, KB, MB, GB, TB
• 若使用 application.properties，则应改为：

  spring.servlet.multipart.max-file-size=512MB
  spring.servlet.multipart.max-request-size=512MB
  

• 若使用的是 Spring Boot 2.x 及以下版本，配置项应为：

  spring:
    http:
      multipart:
        max-file-size: 512MB
        max-request-size: 512MB
  

---

✅ 二、修改 Nginx 配置文件（nginx.conf 或站点配置）

如果项目部署了 Nginx 作为反向代理服务器，还需要调整 Nginx 的请求体大小限制，否则即使后端允许上传大文件，也会被 Nginx 拒绝并返回 413 Request Entity Too Large 错误。

🔧 配置项说明：

http {
    # 设置客户端请求体最大允许大小
    client_max_body_size 512m;
}

或者放在某个具体的 server / location 中以实现精细化控制：

server {
    listen       80;
    server_name  yourdomain.com;

    client_max_body_size 512m;

    location /api/ {
        proxy_pass http://localhost:8080;
    }
}

⚠️ 注意：

• 单位不区分大小写，可以是 k, m, g
• 修改完后需重启 Nginx 生效：

  nginx -s reload
  

---

✅ 三、（可选）前端 Vue 配置（上传组件校验）

虽然前端不做限制也可以，但为了提升用户体验，建议在上传前进行大小判断。

示例：使用 Element Plus 的 Upload 组件

<template>
  <el-upload
    action="/api/upload"
    :before-upload="beforeUpload"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script setup>
const beforeUpload = (file) => {
  const isValidSize = file.size / 1024 / 1024 <= 512; // 限制 512MB
  if (!isValidSize) {
    alert('上传文件不能超过 512MB');
    return false;
  }
  return true;
};
</script>

---

✅ 四、常见问题排查

问题	原因	解决方案
报错 File too large	Spring Boot 限制	修改 max-file-size 和 max-request-size
返回 413 Request Entity Too Large	Nginx 限制	修改 client_max_body_size
前端无报错但接口未收到数据	后端未正确处理	检查日志是否出现 MultipartException
多文件上传失败	总请求大小超限	确保 max-request-size 足够大

---

✅ 五、推荐设置参考（按业务需求选择）

场景	推荐配置
图片上传	max-file-size: 10MB
视频上传	max-file-size: 512MB ~ 2GB
文档/压缩包上传	max-file-size: 100MB ~ 1GB
多文件批量上传	max-request-size >= max-file-size * 文件数

---

✅ 六、总结

要实现一个完整的文件上传流程支持大文件，需确保以下三个环节都做了相应配置：

层级	是否需要配置	配置项
前端（Vue）	✅（可选）	文件大小校验
后端（Spring Boot）	✅	spring.servlet.multipart.*
反向代理（Nginx）	✅	client_max_body_size

---

如果你还使用了 Tomcat、Undertow、Jetty 等嵌入式容器，或者部署在 Docker/Kubernetes 中，也需要注意它们可能有额外的限制。