Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片前言一、Nginx 静态资源代理配置二、Springboot 物理地址映射配置总结

54 阅读 0 评论 36 点赞

我是靠谱客的博主大意毛衣，最近开发中收集的这篇文章主要介绍Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片前言一、Nginx 静态资源代理配置二、Springboot 物理地址映射配置总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片

前言
一、Nginx 静态资源代理配置
二、Springboot 物理地址映射配置
总结

前言

为什么要配置物理地址映射：因为前端的 <img :src="">或者 :style="background-img(url)"这些，如果要给这些标签动态赋值，从后端传来的路径必须是 url 形式，也就是说带冒号的动态src或者url不支持绝对路径的物理地址。所以要配置物理地址映射把图片的的物理地址映射为 url 地址传给前端。比如 D:/aa.png 前端 :src 无法识别，映射为 http://localhost/aa.png 就可以识别了。

为什么要配置静态资源代理：理由和上面一样，只是这个配置是项目部署到服务器上必须要添加的。也就是说项目在本地跑，上传和访问本地的图片，只需要配置Springboot的物理地址映射就可以了。

本篇文章没有介绍如何从前端上传图片并使用后端处理后讲 base64 转化为 url 存入数据库，我的另一篇有详细讲。传送门：Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹

一、Nginx 静态资源代理配置

先放这个，因为简单，下面配置了两个目录的代理，也就是

http://你的IP:端口号/user_head/aa.png可以访问到 /www/wwwroot/xuyijie.icu/upload_file/user_head/ 里面的aa.png

http://你的IP:端口号/blog_img/aa.png可以访问到 /www/wwwroot/xuyijie.icu/upload_file/blog_img/ 里面的aa.png

注意！如果你的服务器配置了类似下面的接口反向代理，你的访问 url 要加上 api 哦，也就是下面这样

http://你的IP:端口号/api/user_head/aa.png

location /api/ {
     proxy_pass http://127.0.0.1:8082/;
}

	# 下面两个location的意思是访问 http://你的IP:端口号/user_head/aa.png 就可以访问到在 
	/www/wwwroot/xuyijie.icu/upload_file/user_head/ 目录下的aa图片了
	
	#然后你就可以把http://你的IP:端口号/user_head/aa.png写到你的前端的 scr 里面就可以访问到了
	
	location /user_head/ {
		root /www/wwwroot/xuyijie.icu/upload_file/;
	}
	location /blog_img/ {
		root /www/wwwroot/xuyijie.icu/upload_file/;
	}

二、Springboot 物理地址映射配置

新建 config 包，在里面新建 WebConfig 类
在这里插入图片描述
代码如下，解析都在注释里

package pers.xuyijie.communityinteractionsystem.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.SpringBootConfiguration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@SpringBootConfiguration
public class WebConfigurer implements WebMvcConfigurer {
    //映射到本地路径的代码意思是
    // 在F:/uploadFiles/user_head/目录下如果有一张aa.png的图片，那么
    // 访问：http://localhost:8081/user_head/aa.png就可以访问到它
    // 静态html 中这样写 <img src="http://localhost:8081/user_head/aa.png">
    // 动态html 中这样写 <img :src="imgUrl"> 把值赋给imgUrl就行，(this.imgUrl="http://localhost:8081/user_head/aa.png")

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //映射到本地路径
	    registry.addResourceHandler("/user_head/**").addResourceLocations("file:F:/uploadFiles/user_head/");
	    registry.addResourceHandler("/blog_img/**").addResourceLocations("file:F:/uploadFiles/blog_img/");

        //映射到服务器的保存路径也可以(和上面的本地路径只能二选一，两个路径不能同时生效）
        //不推荐用代码映射服务器地址，因为我们已经用 Nginx 来代理服务器地址了)
        registry.addResourceHandler("/user_head/**").addResourceLocations("file:/www/wwwroot/xuyijie.icu/upload_file/user_head/");
        registry.addResourceHandler("/blog_img/**").addResourceLocations("file:/www/wwwroot/xuyijie.icu/upload_file/blog_img/")
    }
}

其实“addResourceLocations”里的路径指图片的真是存储路径，和数据库里存储的图片物理路径的字段的值无关
“数据库”里的路径瞎写都可以，只要对应图片的地址就可以，比如图片存在服务器的/www/wwwroot/xuyijie.icu/upload_file/user_head/目录，
“addResourceLocations”里和数据库里都写F://，这样也可以访问到，addResourceLocations是解析路径前端的:src路径，使图片的物理路径转换为url