環境介紹
這里使用的是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對象,測試應該僅僅返回圖片地址的完成路徑
測試是否可以訪問該圖片