前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >若依框架:上传、下载、回显文件怎么处理的,一篇就懂

若依框架:上传、下载、回显文件怎么处理的,一篇就懂

作者头像
知识浅谈
发布2024-05-25 08:47:23
4K1
发布2024-05-25 08:47:23
举报
文章被收录于专栏:分享学习

在使用若依框架上传文件的时候遇到一个问题:在富文本框中上传一个文件传到哪里了,又怎么回显的,这些问题扯出来好多东西哦,且随我一步步看。

🤞主要说的是后端的代码实现,前端的在components组件中的Editor中自己看就行🤞

🎈上传后怎么处理的

先把后端代码贴出来,代码中还调用了各种方法就不粘出来了

代码语言:javascript
复制
    @PostMapping("/upload")
    public AjaxResult uploadFile(MultipartFile file) throws Exception
    {
        try
        {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("url", url);
            ajax.put("fileName", fileName);
            ajax.put("newFileName", FileUtils.getName(fileName));
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }

上传接口 /common/upload

  1. 接口中首先获取文件要存储的路径 String filePath = RuoYiConfig.getUploadPath(); 因为在配置文件application.yml我们可以找到一个这段代码: 文件路径 示例( Windows配置D:/ruoyi/uploadPath,Linux配置 /home/ruoyi/uploadPath) profile: D:/ruoyi/uploadPath 就是上传文件的根路径。
  2. 然后对上传的文件进行各种检查:文件大小,文件后缀等等,
  3. 然后开始把上传的文件存到本地 String fileName = FileUploadUtils.upload(filePath, file);
  4. 最后获取文件的url路径 举个例子:文件地址是D:/ruoyi/uploadPath/upload/2024/01/01/12345.jpg 转换后是profile/upload/2024/01/01/12345.jpg 然后存到数据库,发现没有前缀变了,这个时候文件就上传完了,profile/upload/2024/01/01/12345.jpg传回前端。前缀为什么边接着看。

🎈上传后的文件怎么回显和下载

🍮文件回显

在富文本框中文件上传之后,需要进行回显,上传后拿到了地址profile/upload/2024/01/01/12345.jpg,这个时候去访问后端localhost/dev-api/profile/upload/2024/01/01/12345.jpg 访问地址的过程中经历了两步处理 第一步:前端地址映射 localhost/dev-api/ 变成http://localhost:8080

在这里插入图片描述
在这里插入图片描述

第二步: 访问后端 http://localhost:8080/profile/upload/2024/01/01/12345.jpg 会发现没有/profile 这个接口,那这个接口在哪?访问后端最先走过的就是拦截器,查看各种拦截器,最后在这个地方找到了ResourcesConfig配置类中。

在这里插入图片描述
在这里插入图片描述

这个方法会把/profile开头的路径给替换掉 RuoYiConfig.getProfile() 会获取到 最初的文件根路径D:/ruoyi/uploadPath 会自动转向到 RuoYiConfig.getProfile() 目录下寻找对应的资源文件,也就找到了请求文件最后返回file:D:/ruoyi/uploadPath/upload/123456.jpg文件流。

🍮文件下载

和文件回显同理。

🍚总结

大功告成,撒花致谢🎆🎇🌟,关注我不迷路,带你起飞带你富。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 🎈上传后怎么处理的
  • 🎈上传后的文件怎么回显和下载
    • 🍮文件回显
      • 🍮文件下载
      • 🍚总结
      相关产品与服务
      数据库
      云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档