例如現在有個功能,是實現圖片上傳到服務器並返回圖片地址進行前端渲染的功能。
首先我們的思路如下:
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證書“那個選項)。
如果要部署項目到服務器,設置自己的域名即可。