SpringBoot实现本地文件存储及预览

一、前言

若使用本机存储来存放文件资源,核心实现过程:

  • 上传文件,保存文件(本地磁盘)
  • 返回文件HTTP访问服务器路径给前端,进行效果展示

二、储备

服务端接收上传的目的是提供文件的访问服务,对于SpringBoot而言,其对静态资源访问提供了很好的支持,使用其提供的基本默认配置可以满足开发需求,同时,又支持开发人员进行自定义配置。

SpringBoot默认将 / 所有访问映射到一下目录:**

  • classpath:/META-INF/resources
  • classpath:/static
  • classpath:/public
  • classpath:/resources

在src/main/resources下新建pubic、resources、static三个文件夹,分别放入x.png、xx.png、xxx.png三张图片,如下:

 启动项目后,分别访问:

http://localhost:9999/x.png
http://localhost:9999/xx.png
http://localhost:9999/xxx.png

正常返回图片资源。

说明,SpringBoot默认会挨个从pubic、resources、static里面找是否存在相应的资源,如果有则直接返回。

可以看出这里的静态资源都在classpath下。那么就出现问题:

  • 应用的文件资源不能和项目代码分开存储
  • 项目打包困难,当上传的文件越来越多,项目的打包jar越来越大
  • 代码与文件数据不能分开存储,就意味着文件数据的备份将变得复杂

三、方案

SpringBoot为我们提供了 spring.resources.static-locations 配置自定义静态文件的位置:

spring:
    web:
        resources:
          static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${demo.web.upload-path}

demo:
  web:
    upload-path: D:/data/
  • 配置 demo.web.upload-path 为与项目代码分离的静态资源路径,即:文件上传保存根路径
  • 配置 spring.web.resources.static-locations 除了带上SpringBoot默认的静态资源路径之外,加上file:${demo.web.upload-path}指向外部的文件资源上传路径,即:该路径下的静态资源可以直接对外提供HTTP访问服务

四:Java Code

public String upload(MultipartFile file, HttpServletRequest request) {
        if (file == null) {
            throw new BizException("参数为空");
        }
        // 在 uploadPath 文件夹中通过日期对上传的文件归类保存
        // 例如:/2022/02/22/df9a66f1-760b-4f95-9faf-b5a216966718.png
        String format = sdf.format(new Date());
        File folder = new File(uploadPath + format);
        if (!folder.isDirectory()) {
            folder.mkdirs();
        }

        // 对上传的文件重命名, 避免文件重名
        String oldName = file.getOriginalFilename();
        String newName = UUID.randomUUID().toString()
                + oldName.substring(oldName.lastIndexOf("."), oldName.length());
        try {
            // 文件保存
            file.transferTo(new File(folder, newName));

            // 返回上传文件的访问路径
            // 例如:http://localhost:9999/2022/02/22/df9a66f1-760b-4f95-9faf-b5a216966718.png
            String filePath = request.getScheme() + "://" + request.getServerName()
                    + ":" + request.getServerPort() + request.getContextPath() + "/" + format + newName;

            return filePath;
        } catch (IOException e) {
            throw new BizException("系统错误");
        }

    }

五、模拟文件

将此 upload.html 文件放到 classpath:public 目录下,对外提供访问。如下:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" value="请选择上传文件">
    <input type="submit" value="保存">
</form>
</body>
</html>

访问测试,点击"选择文件",之后"保存":

 文件被保存到服务端的 demo.web.upload-path 指定的资源目录下

 浏览器端响应结果如下,返回一个文件HTTP访问路径:

http://localhost:9999/2022/02/22/df9a66f1-760b-4f95-9faf-b5a216966718.png

使用该HTTP访问路径,在浏览器端访问效果如下。证明我们的文件已经成功上传到服务端,以后需要访问该图片就通过这个HTTP URL就可以了!!!

 

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
SpringBoot项目基于Springboot的多媒体素材库是一个为创作者、教育者和媒体专业人士设计的高效素材管理平台。利用SpringBoot的快速开发能力和微服务架构,该系统旨在提供一种集中化的方式来上传、存储、整理和分享各种格式的多媒体文件,如图片、音频、视频等。 采用前后端分离的设计哲学,前端可能运用了现代JavaScript框架比如React或Vue.js来构建一个富有交互性和响应式的用户界面,而后端则由SpringBoot负责处理文件存储、用户认证、数据同步等核心业务逻辑。 主要功能可能包括: 1. 素材上传与管理:用户可以方便地上传多媒体文件,并进行分类、标签和搜索管理。 2. 在线预览与编辑:支持常见多媒体文件格式的在线预览和基本编辑功能。 3. 权限控制与共享:设置详细的访问权限,允许用户根据需要共享素材库内容。 4. 跨平台访问:适配多种设备和操作系统,确保用户能随时随地访问素材库。 5. 自动备份与同步:提供云存储解决方案,自动进行数据备份和多设备间的数据同步。 6. 协作工具:支持多人在线协作,实时更新和管理团队工作进度。 7. 数据分析:分析素材使用情况,帮助用户了解需求趋势并优化资源分配。 8. API接口:提供开放的API接口,便于第三方应用集成和扩展新的功能。 通过这个多媒体素材库,用户能够更加高效地管理和利用其数字资产,无论是在本地还是云端。它极大地简化了查找和使用多媒体内容的过程,加速了创作流程,同时也提高了团队合作的效率。此外,系统还为内容创作者提供了强大的工具来探索和挖掘他们的创造力,从而提升作品质量和创新性。
# 项目特点 - 前台参考"Hexo"的"Butterfly"设计,美观简洁,响应式体验好。 - 后台参考"element-admin"设计,侧边栏,历史标签,面包屑自动生成。 - 采用Markdown编辑器,写法简单。 - 评论支持表情、GIF动图输入回复等,样式参考Valine。 - 前后端分离部署,适应当前潮流。 - 接入第三方登录,减少注册成本。 - 留言采用弹幕墙,更加炫酷。 - 支持代码高亮和复制,图片预览,深色模式等功能,提升用户体验。 - 搜索文章支持高亮分词,响应速度快。 - 新增文章目录、推荐文章等功能,优化用户体验。 - 新增在线聊天室,支持撤回、语音输入、统计未读数量等功能。 - 新增aop注解实现操作日志功能。 - 支持动态权限修改,采用RBAC模型,前端菜单和后台权限实时更新。 - 后台管理支持修改背景图片,博客配置等信息,操作简单,支持上传相册。 - 代码支持多种搜索模式(Elasticsearch或MYSQL),支持多种上传模式(OSS或本地),可支持配置。Elasticsearch占内存较高,如果服务器配置太低,不建议使用。 - 新增网站导航功能,页面优雅美观。可自行添加自己常用的网站进行分类和排序。 - 新增聊天管理功能,方便清理垃圾聊天内容。 - 新增登录日志功能,随时查看用户的登录信息。 - 前台页面重新布局重构,页面布局更加简洁,首页加载速度更快。 - 前台首页文章列表顶部新增滚动消息,超级炫酷。 - 新增了监控用户是否授权的功能、增加了用户的体验性。 - 增加图片删除后也将该路径的图片删除的功能、大大提高了文件存储的利用率。 - 将接口进行**axios**二次封装、更利于接口的请求和响应。 - 新增本博客配套的**微信小程序**,可随时用手机浏览文章。并且接入微信登录,减少注册成本。 - **微信小程序**新增每日新闻热搜功能、可随时查看热搜。 - 新增本博客配套的**App**,同时接入qq、微博登录,使用更加方便。 - 代码遵循阿里巴巴开发规范,利于开发者学习。 ## 技术介绍 **前端:** vue + vuex + vue-router + axios + vuetify + element + echarts + uniapp + uview + Html + Css + JavaScript **后端:** SpringBoot + nginx + docker + SpringSecurity + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch + RabbitMQ + MaxWell + Websocket **其他:** 接入QQ,微博、微信第三方登录,接入腾讯云人机验证、websocket ## 运行环境 ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值