天天看點

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類中配置