【开发实践】ruoyi如何实现图片的服务器上传和地址回显

最新推荐文章于 2025-03-27 18:05:22 发布

旺卡先生

最新推荐文章于 2025-03-27 18:05:22 发布

阅读量1.9w

点赞数 12

分类专栏：实践应用文章标签： java web http spring vue

本文链接：https://blog.csdn.net/Mr_Wonka/article/details/118631772

版权

实践应用专栏收录该内容

6 篇文章

订阅专栏

本文详细阐述了图片上传的过程，包括前端如何调用上传接口，后端如何处理图片并保存到本地，以及如何通过代理解决跨域问题。在前端，图片路径通过代理解析，最终请求被转发到后端，后端通过配置将URL映射至本地文件夹，从而实现图片数据的获取。整个流程涉及前端、后端和本地文件系统的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片上传

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

/**
 * 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: 200
	imgUrl: "/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
{
	/** 配置静态资源映射 */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry)
    {
        /** 本地文件上传路径 */
        registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**").addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");
		// ...
    }
    // ...
}