例如现在有个功能,是实现图片上传到服务器并返回图片地址进行前端渲染的功能。
首先我们的思路如下:
1、微信小程序端选择图片--->2、上传到服务器--->3、将图片写入指定文件夹--->4、再将文件所在的地址记录到数据库(服务器地址)--->5、返回数据库中图片的地址于前端赋值。
由于前三步已经在上一篇博文完成,这里就不再过多阐述,我们将本次内容的重点放在第四、五步。
在完成第三步时,我第一时间想到的是将绝对路径,直接赋予微信小程序端image标签中的的src,
例如:
经过测试以及查阅相关资料,这种在项目外采用绝对路径的访问方式是错误的。
于是去网上查找了其他方法,有另一种加载本地图片资源的方式就是通过小程序自身项目中的image文件夹进行访问
然后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
浏览器能够显示图片,说明设置项目外文件夹访问成功,此时已经成功了一半。
那么又回到最初的问题上,我们现在既然能访问其他文件夹的图片了,我们就要把这个地址送到微信小程序将图片显示出来。
有了地址,就简单很多了,在我上一篇博文代码的基础上,我们只需要在文件名之前添加图片所在文件夹的访问地址。
例如我的图片存放在D:\\WeCha\\Pic\\example.jpg,那么我就将文件名设置成网络地址+图片名并写入数据库。
String httpUrl = "http://localhost:8080/Pic/";
String picName = httpUrl + "图片名";
//调用service服务将图片的完整地址写入数据库
picService.addPic(picName);
数据库图片的地址如下
至此,小程序端已经可以进行这种方式的图片访问了(记得勾选”不校验合法域名.....https证书“那个选项)。
如果要部署项目到服务器,设置自己的域名即可。