跳到主要内容

解除上传文件大小限制

1.更新日志​

更新日志

V1.4.4版本更新日志：

  • 1.新增前台Banner管理
  • 2.调整文件上传默认格式与大小限制
  • 3.优化后台前端
  • 4.跳转前台前端
  • 5.调整其他代码
  • 6.vite-plugin-imagemin依赖下载有问题，去除图片压缩
  • 7.vite-plugin-imagemin依赖下载有问题，去除图片压缩
  • 8.修复生产与开发环境时间不一致问题
  • 9.修复评论删除时与点赞的联动删除问题
  • 10.修复留言删除时与点赞收藏评论的联动删除问题
  • 11.修复后台评论跳转按钮问题
  • 12.优化评论的显示顺序
  • 13.优化其他代码
  • 14.修复后台登录无法跳转问题

ps：优化了加载速度，亲测无缓存首页加载最快3.5s，平均4s

完整的更新日志: https://gitee.com/kuailemao/ruyu-blog/compare/v1.4.3...v1.4.4

2.背景​

背景

最近，Ruyu-Blog 作者发布了 V1.4.4 版本更新，该版本对文件上传功能进行了严格的限制，将上传文件的最大大小限制设定为 0.3MB。这个限制对于需要上传较大图片或文件的用户来说是个不小的困扰，比如在上传站长头像、背景图或其他多媒体资源时，往往无法满足实际需求。为了解决这个问题，我编写了一个详细的教程，帮助大家解除这个文件大小限制，通过简单的配置修改，让博客的文件上传不再受到 0.3MB 的束缚，从而自由上传更大尺寸的文件，提升用户体验并满足更多的实际使用场景。希望这个教程能够帮助到需要的朋友们，让大家能够更加灵活地管理博客资源。

3.缺点​

  • 解除文件上传大小限制的做法虽然解决了上传较大文件的问题，但也带来了一些潜在的缺点和风险
缺点

  • 性能问题: 上传更大的文件可能会导致服务器负载增加，特别是在带宽或服务器资源有限的情况下，可能会影响网站的加载速度和响应时间，从而降低用户体验。

  • 存储成本增加: 上传更大尺寸的文件会占用更多的存储空间，这可能会导致服务器存储成本的增加，尤其是对使用云存储服务的用户。

  • 安全风险: 放宽上传限制可能会增加恶意文件上传的风险，可能会有不安全的文件格式或超大文件被上传，从而造成安全隐患。

  • 页面加载速度: 较大的图片或文件会影响页面的加载速度，特别是对于移动端用户或网络环境较差的用户，可能导致页面加载时间变长，影响网站的整体性能。

  • 用户体验不一致: 上传大文件可能导致不同用户设备之间的体验差异，一些低配置或老旧设备在处理大文件时可能会出现卡顿或崩溃的问题。

  • 带宽消耗增加: 较大的文件会消耗更多的带宽，特别是在高流量的网站上，这可能会导致带宽成本的增加，同时也可能引发带宽超限的问题。

这些缺点需要在解除上传限制时予以考虑，最好能结合具体需求，通过优化图片压缩、调整服务器配置等方式，尽量减小对性能和安全的影响，需权衡资源、性能和安全方面的影响

4.后端限制​

blog-backend/src/main/java/xyz/kuailemao/enums/UploadEnum.java

下图的5.0修改您自定义的图片文件上传大小

public enum UploadEnum {

    // 站长头像
    WEBSITE_INFO_AVATAR("websiteInfo/avatar/", "站长头像", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 0.5),
    // 站长背景
    WEBSITE_INFO_BACKGROUND("websiteInfo/background/", "站长背景", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 1.0),
    // 文章封面
    ARTICLE_COVER("article/articleCover/", "文章封面", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 3.0),
    // 文章图片
    ARTICLE_IMAGE("article/articleImage/", "文章图片", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.GIF, ImageConst.WEBP), 3.0),
    // 用户头像
    USER_AVATAR("user/avatar/", "用户头像", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 0.5),
    // 前台首页Banners图片
    UI_BANNERS("banners/", "前台首页Banners图片", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 1.0);


    // 上传目录
    private final String dir;

    // 描述
    private final String description;

    // 支持的格式
    private final List<String> format;

    // 文件最大大小 单位：MB
    private final Double limitSize;
}

5.前端限制​

blog-frontend\kuailemao-admin\src\pages\blog\info\stationmaster-info\index.vue

function beforeUpload(file: UploadProps['fileList'][number]) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp'
  if (!isJpgOrPng)
    message.error('文件格式必须是jpg或png或webp')

  #后面的数字2就是您定义的大小
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M)
    message.error('图片必须小于 2MB')

  return isJpgOrPng && isLt2M

6.重新运行后端​

停止井重新运行BlogBackendApplication',也就是application-dev.yml文件

7.上传验证​

0%