若依框架:图片上传、下载、回显是怎么处理的

95 阅读2分钟

在使用若依框架做开发时遇到一个问题:在富文本框中上传一个图片传到哪里了,又怎么回显的,下面一步步来看。

🤞若依版本:4.8.2

🤞主要说的是后端的代码实现,前端主要是 Summernote 初始化时 调用 sendFile() 方法

🎈上传后怎么处理的

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

    @PostMapping("/upload")
    @ResponseBody
    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,注意是本地运行项目,端口8080。

1、接口中首先获取文件要存储的路径 String filePath = RuoYiConfig.getUploadPath(); 因为在配置文件 application.yml 可以找到这样一个配置:

ruoyi:
  # 文件路径 示例( Windows配置D:/ruoyi/uploadPath,Linux配置 /home/ruoyi/uploadPath)
  profile: D:/ruoyi/uploadPath

profile: D:/ruoyi/uploadPath 就是上传文件的根路径。

2、然后对上传的文件进行各种检查:文件大小,文件后缀等等,

3、然后开始把上传的文件存到本地 String fileName = FileUploadUtils.upload(filePath, file);

4、最后获取文件的url路径 举个例子:图片地址是 D:/ruoyi/uploadPath/upload/2026/01/08/12345.jpg 转换后 url = "http://localhost:8080/profile/upload/2026/01/08/123456.jpg",fileName = "/profile/upload/2026/01/08/12345.jpg" 然后存到数据库,文件就上传完了,然后将 rul、fileName等传回前端。

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

在富文本框中文件上传之后,需要进行回显,上传后返回了图片的地址(返参url),所以图片的src="http://localhost:8080/profile/upload/2026/01/08/123456.jpg"。

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

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

🍮文件下载

和文件回显同理。