微信小程序——設置Springboot本地服務器端口和地址,從而訪問項目外文件夾的內容

例如現在有個功能,是實現圖片上傳到服務器並返回圖片地址進行前端渲染的功能。

首先我們的思路如下:

1、微信小程序端選擇圖片--->2、上傳到服務器--->3、將圖片寫入指定文件夾--->4、再將文件所在的地址記錄到數據庫(服務器地址)--->5、返回數據庫中圖片的地址於前端賦值。

由於前三步已經在上一篇博文完成,這裏就不再過多闡述,我們將本次內容的重點放在第四、五步。

在完成第三步時,我第一時間想到的是將絕對路徑,直接賦予微信小程序端image標籤中的的src,

例如:

<image class = "image-example" 
       src = "C:\Users\Admin\Desktop\example.jpg">
</image>

經過測試以及查閱相關資料,這種在項目外採用絕對路徑的訪問方式是錯誤的。

於是去網上查找了其他方法,有另一種加載本地圖片資源的方式就是通過小程序自身項目中的image文件夾進行訪問

然後image標籤的內容改爲

<image class = "image-example" 
       src = "../image/example.jpg">
</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目錄,再運行項目,在瀏覽器中訪問http://localhost:8080/example.jpg

瀏覽器能夠顯示圖片,說明設置項目外文件夾訪問成功,此時已經成功了一半。

那麼又回到最初的問題上,我們現在既然能訪問其他文件夾的圖片了,我們就要把這個地址送到微信小程序將圖片顯示出來。

有了地址,就簡單很多了,在我上一篇博文代碼的基礎上,我們只需要在文件名之前添加圖片所在文件夾的訪問地址。

例如我的圖片存放在D:\\WeCha\\Pic\\example.jpg,那麼我就將文件名設置成網絡地址+圖片名並寫入數據庫。

String httpUrl = "http://localhost:8080/Pic/";
String picName = httpUrl + "圖片名"; 
//調用service服務將圖片的完整地址寫入數據庫
picService.addPic(picName);

數據庫圖片的地址如下

至此,小程序端已經可以進行這種方式的圖片訪問了(記得勾選”不校驗合法域名.....https證書“那個選項)。

如果要部署項目到服務器,設置自己的域名即可。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章