SpringBoot實現(xiàn)圖片上傳及本地訪問

更新時間：2022年09月19日 10:28:36 作者：_多拉不懂A夢

在SpringBoot項目中,處理靜態(tài)文件訪問尤其是實時更新的文件如商品圖片,可通過配置WebMvcConfig將本地文件映射到URL路徑上,以解決重啟項目才能訪問文件的問題,本文詳解如何保存和訪問這些文件,幫助開發(fā)者優(yōu)化項目文件管理

項目需求

最近做軟件架構(gòu)平臺的課程實驗時遇到這樣的一個問題。需求是要修改商品的圖片，完成圖片的上傳，這本身并不難，使用form-data的格式進行交互就能完成。但是上傳后無法立馬訪問到才是最頭疼的問題。

一開始選擇是將圖片存到static目錄下面，當作靜態(tài)文件處理，但是后面發(fā)現(xiàn)，只有重啟項目后，靜態(tài)文件加載到target中才能訪問到。

找了很多解決辦法，最終找到了合適的方案。

springboot靜態(tài)文件講解

springboot的靜態(tài)文件根據(jù)需求我們可以分成兩種

恒不變的項目靜態(tài)文件static：

這種類型的文件是項目建立初就不會變動的文件，典型的有各種各樣的UI庫，bootstrap，jquery，還有項目的圖標等等。
這些文件最終會被加載到項目的target目錄下，作為類似項目的依賴包持續(xù)使用，差不多和maven依賴包一樣。

target目錄下的文件不需要進行任何配置盡可以通過域名加目錄直接訪問到。如localhost:8080/echarts/echarts.min.js

持續(xù)上傳更新的文件file：

這一類文件是保存在系統(tǒng)服務端的數(shù)據(jù)文件，會不斷的收到用戶和管理員的CRUD操作處理，典型的有系統(tǒng)文檔，商品圖片等等。
這些文件僅保存在服務端，但是不會進入項目目錄下，更不會加載到target中。

上傳文件

根據(jù)上面的描述，我們很清楚我們需要解決的就是如何存儲持續(xù)上傳更新的文件，以及如何才能訪問的到。

寫一個上傳文圖片的接口，并將圖片保存到本地的目錄項

public class Constant {
    public static final String ITEM_PICTURE_PATH = "D:\\Tools\\";
}

    @PostMapping("/importPicture")
    public MsgEntity importPicture(@RequestParam("file") MultipartFile file, @RequestParam("id") String id) throws FileNotFoundException {
        //獲得文件的后綴
        String filename = UUID.randomUUID() + Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."));
        //獲取文件存儲路徑
        File filepath = new File(Constant.ITEM_PICTURE_PATH + filename);
        String url = String.valueOf(filepath);
        try {
            //存文件
            file.transferTo(filepath);
        } catch (IOException e) {
            e.printStackTrace();
        }
        itemService.setPictureUrl("http://localhost:8080/temp-image/" + filename, id);
        return new MsgEntity("SUCCESS", "200", url);
    }

訪問文件

上傳文件已經(jīng)完成了，那么如何訪問到存儲在本地服務器的文件呢？

其實SpringBoot已經(jīng)很好的為我們解決了這個問題，我們只需要加上一點配置，就能將本地文件映射到url路徑上。

在properties中加上自定義配置

# 配置上傳圖片的路徑和訪問圖片圖片的路徑
upload.file.location=file:D:/Tools/
upload.file.path =/temp-image/**

編寫WebMvcConfig的配置類

@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {
    @Value("${upload.file.location}")
    private String fileLocation;
    @Value("${upload.file.path}")
    private String filePath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
		//注冊配置類，使用addResourceHandlers方法，將本地路徑fileLocation映射到filePath路由上。
        registry.addResourceHandler(filePath).addResourceLocations(fileLocation);
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }
}

這樣就可以在瀏覽器上訪問了