SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

將一張test。jpg的圖片放到Static包下,然後在瀏覽器中輸入localhost:8080/test。jpg 就可以看到這種圖片了

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

注意:如果這個時候瀏覽器無法顯示圖片,先要清除一下Maven的Plugins。雙擊clean:clean,清除後重新整理瀏覽器就可以看到了。

SpringBoot + Vue (四)檔案上傳 + 攔截器

如果靜態資源不想放在static下,可以設定過濾規則(虛擬路徑)

SpringBoot + Vue (四)檔案上傳 + 攔截器

這裡設定虛擬路徑images,這樣再次訪問test。jpg時就需要加入這個虛假路徑 /images/test。jpg

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

如果不想放在static目錄下,想自己建一個目錄,就需要在applicationg。properties中加入一行程式碼

spring.web.resources.static-locations

=

classpath:/css

這時預設的本地靜態資源路徑就變成了/css

靜態資源僅作為了解,前後端分離專案的靜態資源不放在static目錄下。

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

注意:下面程式碼中的 f 要和

SpringBoot + Vue (四)檔案上傳 + 攔截器

中的file 名字相同

SpringBoot + Vue (四)檔案上傳 + 攔截器

具體操作演示:

先在控制器裡面新建一個FileUploadController的檔案上傳控制器

SpringBoot + Vue (四)檔案上傳 + 攔截器

在FileUploadController控制器中,編寫程式碼如下:

(注意,photo的資料型別為

MultipartFile,資料型別HttpServletRequest 為獲取伺服器地址

@RestController

public class

FileUploadController {

@PostMapping

"/upload"

public

String up (String nickname, MultipartFile photo, HttpServletRequest request)

throws

IOException {

System。

out

。println(nickname);

//獲取圖片檔名

System。

out

。println(photo。getOriginalFilename());

//獲取檔案型別

System。

out

。println(photo。getContentType());

String path = request。getServletContext()。getRealPath(

"/upload"

);

System。

out

。println(path);

saveFile(photo,path);

return

"上傳成功"

}

private void

saveFile(MultipartFile photo, String path)

throws

IOException {

//

判斷儲存的目錄是否存在,如果不存在則建立

File dir =

new

File(path);

if

(!dir。exists()){

//建立目錄

dir。mkdir();

}

File file =

new

File(path+photo。getOriginalFilename());

photo。transferTo(file);

}

在Apipost 中進行測試,選擇 form-data ;引數photo的型別選 File

SpringBoot + Vue (四)檔案上傳 + 攔截器

上傳檔案預設是單個不超過1M,單次不超過10M。如果想要超過就需要在applictiong。properties中設定

spring.servlet.multipart.max-file-size

=

5MB

使用者上傳圖片後,因為不再預設是static目錄中所以不能直接在瀏覽器中顯示,如果需要顯示則需要另外配置:(本地測試階段每次進入伺服器的地址都不一樣,所以會出現瀏覽器訪問不到的情況,需要重新上傳)

spring.web.resources.static-locations

=

/upload/

SpringBoot + Vue (四)檔案上傳 + 攔截器

以後我們的程式會有很多控制器,這些控制器可能需要相同的操作,比如使用者是否登入了。攔截器可以對請求中一些統一的操作做一個處理。

使用者發過來的請求都可以先到攔截器,

SpringBoot + Vue (四)檔案上傳 + 攔截器

流程:使用者請求先過攔截器(preHandle方法), 通過後在訪問目標方法,目標方法呼叫後返回控制器(postHandle),再到頁面顯示出來,之後在回到攔截器(afterCompletion)。可以設定多個攔截器(下圖就設定了3個攔截器)。

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

建一個類,一般以 Interceptor 結尾,並繼承系統的 HandlerInterceptor 攔截器類,然後可以重寫父類中的preHandle、postHandle、afterCompletion 三種方法。方法不用都重寫,一般用preHandle方法。

SpringBoot + Vue (四)檔案上傳 + 攔截器

SpringBoot + Vue (四)檔案上傳 + 攔截器

攔截器需要進行註冊否則不能使用。註冊在java類中完成。新建一個java類(webconfigurer )實現 webMvcconfigurer 介面

SpringBoot + Vue (四)檔案上傳 + 攔截器

例如上圖:設定路徑,攔截user路徑下的所有請求。具體操作:

SpringBoot + Vue (四)檔案上傳 + 攔截器

程式碼如下:

public class

LoginInterceptor

implements

HandlerInterceptor {

@Override

//request對應前端請求,response給前端返回對應的資訊

public boolean

preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)

throws

Exception{

System。

out

。println(

"LoginInterceptor"

);

return true

}

這裡不會自動生效,需要配置。一般是在config 包下的WebConfig類中配置