微信小程序——设置Springboot本地服务器端口和地址

上网导航 2023-09-14 286 0条评论
摘要: 例如现在有个功能,是实现图片上传到服务器并返回图片地址进行前端渲染的功能。首先我们的思路如下:1、微信小程序端选择图片--->2、上传到服务器---...

例如现在有个功能,是实现图片上传到服务器并返回图片地址进行前端渲染的功能。

首先我们的思路如下:

1、微信小程序端选择图片--->2、上传到服务器--->3、将图片写入指定文件夹--->4、再将文件所在的地址记录到数据库(服务器地址)--->5、返回数据库中图片的地址于前端赋值。

由于前三步已经在上一篇博文完成,这里就不再过多阐述,我们将本次内容的重点放在第四、五步。

在完成第三步时,我第一时间想到的是将绝对路径,直接赋予微信小程序端image标签中的的src,

例如:


经过测试以及查阅相关资料,这种在项目外采用绝对路径的访问方式是错误的。

于是去网上查找了其他方法,有另一种加载本地图片资源的方式就是通过小程序自身项目中的image文件夹进行访问

微信小程序——设置Springboot本地服务器端口和地址

然后image标签的内容改为


这种形式虽然可以达到加载图片的效果,但是图片是存放在前端小程序项目内的,如果该文件夹的图片过多或者过大,导致小程序越来越大(何况小程序大小也有限制),因此,这个目录用来存放用户图片也是不合理的。

那么有没有一种方式,既可以满足我们访问项目外其他文件夹的文件,又能保证其能够正确返回前端加载呢?

答案是肯定的。

此时我们回来看看springboot项目

IntelliJ IDEA---springboot---内置tomcat

端口:8080

端口下的内容:Hello World

于是一个想法油然而生:我们可以通过设置与修改springboot的访问地址与绝对路径的映射,达到通过访问地址去取绝对地址文件夹中的内容。

有了这个想法,我们去设置springboot的相关代码。

找到springboot的application.properties文件,补充两行代码:

##这里选择D盘下的WeChat文件夹作为对外访问的目录,可以根据具体需求设置
spring.resources.static-locations=file:D:\\WeChat
##表示所有的访问都经过静态资源路径
spring.mvc.static-path-pattern=/**

然后将example.jpg文件放入D:\\WeChat目录,再运行项目,在浏览器中访问:8080/example.jpg

微信小程序——设置Springboot本地服务器端口和地址

浏览器能够显示图片,说明设置项目外文件夹访问成功,此时已经成功了一半。

那么又回到最初的问题上,我们现在既然能访问其他文件夹的图片了,我们就要把这个地址送到微信小程序将图片显示出来。

有了地址,就简单很多了,在我上一篇博文代码的基础上,我们只需要在文件名之前添加图片所在文件夹的访问地址。

例如我的图片存放在D:\\WeCha\\Pic\\example.jpg,那么我就将文件名设置成网络地址+图片名并写入数据库。

String httpUrl = "http://localhost:8080/Pic/";
String picName = httpUrl + "图片名"; 
//调用service服务将图片的完整地址写入数据库
picService.addPic(picName);

数据库图片的地址如下

微信小程序——设置Springboot本地服务器端口和地址

至此,小程序端已经可以进行这种方式的图片访问了(记得勾选”不校验合法域名.....https证书“那个选项)。

如果要部署项目到服务器,设置自己的域名即可。

文章版权及转载声明:

作者:上网导航本文地址:https://www.90xe.com/post/4307.html发布于 2023-09-14
文章转载或复制请以超链接形式并注明出处技术导航

分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏