Java Web中上傳圖片以及顯示圖片的方法

環境需求

jdk8+
windows
開發工具
postman

創建一個spring boot starter專案

打開你熟悉的開發工具，創建一個spring boot starter專案，只需要在pom.xml中加入spring web依賴即可
如果你創建的是maven專案，那么可以上官網，根據提示自動生成一個符合要求的pom.xml檔案，替換掉原來的pom.xml檔案即可
pom.xml的內容如下（artifactId和groupId等請根據自己的情況設定）

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.5.3</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>kmhc</groupId>
	<artifactId>ImageUpload</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>ImageUpload</name>
	<description>Image Upload Demo</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

撰寫獲取圖片的邏輯

先不著急寫上傳圖片的邏輯，先寫獲取圖片的邏輯，看看圖片是否能夠根據想想中的一樣獲取，具體代碼如下（包名請根據情況自行決定）

package kmhc.api;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

import javax.imageio.ImageIO;

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ImageController {

	private static final String BASE_PATH = "D:\\workspace\\java\\ImageUpload\\src\\media";

	@GetMapping(path = "/image/{filename}", produces = { MediaType.IMAGE_GIF_VALUE, MediaType.IMAGE_JPEG_VALUE,
			MediaType.IMAGE_PNG_VALUE })
	public BufferedImage getImage(@PathVariable("filename") String filename) throws IOException {
		// 首先組合檔案物件
		File file = new File(BASE_PATH, filename);
		// 判斷檔案是否存在
		if (file.exists()) {
			// 讀取檔案流，用檔案流創建圖片，這里也可以通過ImageIO直接讀取檔案
			FileInputStream in = new FileInputStream(file);
			BufferedImage image = ImageIO.read(in);
			in.close();
			return image;
		} else {
			// 如果不存在回傳空
			return null;
		}
	}
}

除了上面的代碼以外，還需要提供BufferedImage的決議器，代碼如下

package kmhc.config;

import java.util.List;

import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.BufferedImageHttpMessageConverter;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class ImageConfig implements WebMvcConfigurer {

	@Override
	public void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
		converters.add(new BufferedImageHttpMessageConverter());
	}
}

放一張圖片在對應的檔案夾中，如圖所示
然后訪問網頁中的鏈接，此圖對應的鏈接為http://127.0.0.1:8080/image/test.jpeg
可以看到訪問成功，在前端中需要顯示圖片，將這個url引入進去就好了

撰寫上傳圖片的邏輯

上傳圖片的邏輯要稍微復雜一點，考慮到代碼的魯棒性，需要用條件判斷陳述句做處理，完整代碼如下

package kmhc.api;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.UUID;

import javax.imageio.ImageIO;

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class ImageController {

	private static final String BASE_PATH = "D:\\workspace\\java\\ImageUpload\\src\\media"; 
	
	/**
	 * 注意produces產出格式，如果沒有對應型別則無法處理
	 * @param filename 圖片名
	 * @return 圖片流
	 * @throws IOException
	 */
	@GetMapping(path = "/image/{filename}", produces = { MediaType.IMAGE_GIF_VALUE, MediaType.IMAGE_JPEG_VALUE,
			MediaType.IMAGE_PNG_VALUE })
	public BufferedImage getImage(@PathVariable("filename") String filename) throws IOException {
		// 首先組合檔案物件
		File file = new File(BASE_PATH, filename);
		// 判斷檔案是否存在
		if (file.exists()) {
			// 讀取檔案流，用檔案流創建圖片，這里也可以通過ImageIO直接讀取檔案
			FileInputStream in = new FileInputStream(file);
			BufferedImage image = ImageIO.read(in);
			in.close();
			return image;
		} else {
			// 如果不存在回傳空
			return null;
		}
	}
	
	/**
	 * 簡單的上傳邏輯，在實際運用中需要結合具體場景使用，有可能會存在上傳新圖片需要洗掉舊圖片的情況，以及用戶系結圖片url的情況
	 * @param file
	 * @throws IOException
	 */
	@PostMapping(value = "/image", produces = { MediaType.APPLICATION_JSON_VALUE, MediaType.IMAGE_GIF_VALUE, MediaType.IMAGE_JPEG_VALUE, MediaType.IMAGE_PNG_VALUE })
	public void uploadImage(MultipartFile file) throws IOException {
		// 獲取檔案夾物件
		File folder = new File(BASE_PATH);
		// 判斷檔案夾存不存在，不存在則創建
		if (!folder.exists()) {
			folder.mkdirs();
		}
		// 獲取原檔案名
		String oldName = file.getOriginalFilename();
		// 生成新檔案名
		String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
		// 保存圖片
		file.transferTo(new File(folder, newName));
	}
}

打開postman，嘗試上傳一張圖片，注意請求格式必須是post請求（這個要看具體情況，也有可能是patch），并且body格式是form-data
可以看到圖片上傳成功，并且名字也被改成了UUID了

問題點

如果提示404，那么有可能是服務沒有重新啟動的原因，需要手動重新服務才能生效
建議加入spring boot devtools依賴，可以熱啟動，代碼保存后就重啟服務，這一部分請自行上官網加入依賴

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/291618.html

標籤：其他

上一篇：如何打開 Excel VBA 及我的第一個代碼

下一篇：【YOLOV5-5.0 原始碼解讀】plots.py