最近寫了關于圖片上傳至本地文件夾或服務器，上傳路徑到數據庫，并在上傳時預覽圖片。使用到的工具如下：
框架：spring boot 2.0
前端模板：thymeleaf
圖片預覽：js
首先，上傳以及預覽，js以及<input type="file">，以及預覽圖片的js
|
1
2
3
4
5
6
7
8
9
10
11
|
function img(obj){ var imgfile = obj.files[0]; console.log(imgfile); var img = new image(); var fr = new filereader(); fr.onload = function(){ $('#img').attr('src',fr.result); } fr.readasdataurl(imgfile);}<input type="file" name="url" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="opacity:1" onchange="img(this)"/> |
效果如圖所示：
后臺獲取圖片 將文件存入本地文件夾，這里要提一下，文件存放和將路徑放進數據庫比較簡單，可以查找資料，這里不放代碼了。主要講解一下配置虛擬路徑：
為什么要配置虛擬路徑呢？如果不配置虛擬路徑直接訪問本地文件夾或服務器上的文件或圖片信息，會報錯not allowed to load local resource，因為瀏覽器為了安全，不允許加載本地文件。
|
1
|
registry.addresourcehandler("/images/**").addresourcelocations("file:/c:/users/asus/desktop/file/"); |
首先解釋一下，"/images/**" 虛擬路徑，
位于static靜態文件下，file:/c:/users/asus/desktop/file/ ，c:/users/asus/desktop/file/ 指本地圖片存儲文件夾，如果是服務器，則改成對應文件夾即可，這里是代碼配置靜態文件，也可以直接在.properties文件里配置。
這里有一個問題file:/c:/users/asus/desktop/file/的寫法存在差異，有的需要file:///c:/users/asus/desktop/file/，具體原因不清楚，記錄下來，存入數據庫的路徑為/images/+"圖片名"
最后看下最后的效果圖：
總結
以上所述是小編給大家介紹的spring boot2.0圖片上傳至本地或服務器并配置虛擬路徑的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持！
原文鏈接：https://blog.csdn.net/qq_37988830/article/details/84679890
