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

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

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


前言

为什么要配置物理地址映射:因为前端的 或者 :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 类
Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片_第1张图片
代码如下,解析都在注释里

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 中这样写 
    // 动态html 中这样写  把值赋给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


总结

这是一个总结

哦对了,如果前后端不会打包部署到服务器,我的另外一篇文章有详细讲解,

传送门:记Linux使用宝塔部署Vue+Springboot前后端分离项目

你可能感兴趣的:(Java,Web前端,Linux,前端,服务器,nginx,spring,boot,静态代理)