RuoYi是如何实现图片的服务器上传和地址回显

图片上传

现在想要去上传一张照片，首先前端调用上传接口

/*** xx图片上传*/
@PostMapping("/avatar")
public AjaxResult avatar(@RequestParam("avatarfile") MultipartFile file) throws IOException
{if (!file.isEmpty()){// ...String avatar = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file);if (userService.updateUserAvatar(loginUser.getUsername(), avatar)){AjaxResult ajax = AjaxResult.success();ajax.put("imgUrl", avatar);// ...return ajax;}}return AjaxResult.error("上传图片异常，请联系管理员");
}

保存到数据库，并返回给前端

{code: 200imgUrl: "/profile/avatar/2021/06/17/6bbf9ba0-5341-4bc1-8af2-0943ec9aa530.jpeg"msg: "操作成功"
}

web前端将其拼接，就可以访问到服务器上的本地文件
http://localhost/dev-api/profile/avatar/2021/06/17/xxx.jpeg

图片路径

前端

可以看到图片路径有点陌生，这里使用到了代理；路径首先被web前端解析

-- 前端配置
process.env.VUE_APP_BASE_API = 'http://localhost/dev-api'-- 使用代理来解决跨域问题
http://localhost/dev-api -> http://localhost:8080-- 解析前端请求 /dev-api
http://localhost/dev-api/profile/avatar/2021/06/17/xxx.jpeg
-- 此时，再将请求交给后端处理
http://localhost:8080/profile/avatar/2021/06/17/xxx.jpeg		

后端

后端对匹配的URL进行拦截 /profile/** ，映射至本地文件夹 RuoYiConfig.getProfile()。

/*** 通用配置* * @author ruoyi*/
@Configuration
public class ResourcesConfig implements WebMvcConfigurer
{/** 配置静态资源映射 */@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry){/** 本地文件上传路径 */registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**").addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");// ...}// ...
}

相关常量

# 资源映射路径 前缀
Constants.RESOURCE_PREFIX = "/profile"# RuoYiConfig.getProfile() 获取项目信息 ruoyi.profile
D:/ruoyi/uploadPath

这样图片数据便被从本地拿到，经历了 前端 -> 后端 -> 本地文件 的过程！