環境介紹

這裡使用的是Spring Boot 2.3.4，需要在pom檔案中引入Spring Boot建立web專案的常規依賴

依賴如下：

<!--Spring Boot web-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

最終效果是實現一個介面，用來提供上傳圖片的服務，最終將圖片儲存到伺服器上，同時給前端返回儲存後的圖片訪問路徑，實現一個簡單的圖片伺服器。

步驟

1.建立資料夾

我們需要在伺服器上建立一個資料夾，用來儲存使用者上傳的圖片。這裡我是在本地機器上執行專案，我在E盤下建立了一個upload資料夾。

2.配置檔案

在Spring Boot的配置檔案中我們自定義一個變數，用來存放這個資料夾的路徑，方便我們後期對資料夾路徑進行修改。在專案中使用該路徑是可以直接注入。

在application.yml中新增下面配置

user.filepath: E:/upload/

如果沒有使用yaml格式的配置檔案，而是使用.properties配置檔案，則在application.properties中新增下面配置：

user.filepath=E:/upload/
 

3.自定義資源對映

我們需要一個虛擬的路徑對映到我們伺服器中圖片的地址，這樣我們就可以通過這個虛擬地址和我們的圖片的檔名稱來訪問我們上傳的圖片了。

這裡通過實現WebMvcConfigurer介面，來達到我們自定義資源對映的目的。建立一個配置類CustomWebConfiguration，內容如下：

@Configuration
public class CustomWebConfiguration implements WebMvcConfigurer {

    // 注入我們配置檔案中寫好的圖片儲存路徑
    @Value("${user.filepath}")
    private String filePath;

    // 自定義資源對映
    // 訪問圖片示例：http://localhost:3000/api/images/圖片名稱.jpg
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/api/images/**")
                .addResourceLocations("file:"+ filePath);
    }
}
 

注意：不要忘記打上@Configuration註解

4.編寫Controller層

在Controller層中編寫一個POST請求方式的方法，用來處理上傳圖片的請求

程式碼如下：

@RestController
@RequestMapping("/api/img")
public class ImageController {

    // 注入配置中圖片儲存路徑
    @Value("${user.filepath}")
    private String filePath;



    // 處理上傳圖片請求的方法
    // @RequestPart("pic")MultipartFile 上傳檔案時攜帶圖片的key定義為pic
    @RequestMapping(value = "/upload",method = RequestMethod.POST,consumes = "multipart/form-data")
    public String upload(@RequestPart("pic")MultipartFile multipartFile){

        // 生成一個隨機的名稱，避免檔名重複
        UUID uuid = UUID.randomUUID();
        // 獲取原檔名稱
        String originalFileName = multipartFile.getOriginalFilename();
        // 獲取原檔案的字尾
        String fileSuffix = originalFileName.substring(originalFileName.lastIndexOf('.'));
        // 儲存檔案
        File file = new File(filePath + uuid + fileSuffix);
        try {
            multipartFile.transferTo(file);
        } catch (IOException e) {
            e.printStackTrace();
            return "error";
        }
        // 返回圖片的完整訪問路徑，這地方ip和埠可以改為動態獲得，這樣在部署到伺服器上時無需改變，為了方便起見這裡直接寫死了
        return "http://localhost:3000/api/images/"+uuid+fileSuffix;
    }

}

5.上傳測試

啟動專案，我們使用postman發起測試請求

注：我跑的專案中有統一的響應資料處理，所以返回值是個json物件，測試應該僅僅返回圖片地址的完成路徑

測試是否可以訪問該圖片