SpringBoot3實(shí)現(xiàn)上傳圖片并返回路徑讓前端顯示圖片

更新時(shí)間：2024年12月31日 10:14:39 作者：Harry技術(shù)

這篇文章主要介紹了SpringBoot3實(shí)現(xiàn)上傳圖片并返回路徑讓前端顯示圖片,文中通過圖文和代碼講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

Springboot 3 上傳圖片，并返回路徑讓前端顯示圖片

步驟：

1.利用SpringBoot寫一個(gè)圖片上傳接口

2.接收前端傳遞過來的圖片并保存到本地指定位置。

3.前端（瀏覽器）可以通過url訪問上傳過的圖片

創(chuàng)建項(xiàng)目：

pom.xml 主要依賴

<properties>
    <java.version>17</java.version>
</properties>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

application.yml 配置一個(gè)圖片上傳地址,方便后續(xù)更改路徑

upload:
  # 圖片保存路徑
  path: E:\img

寫一個(gè)FileController用來接收前端提交的圖片文件，并把圖片保存到服務(wù)器的指定位置

/**
 * @author harry
 * @公眾號 Harry技術(shù)
 */
@RestController
@RequestMapping("/upload")
public class FileController {

    @Value("${upload.path}")
    private String uploadPath;


    @PostMapping
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        try {

            if (file.isEmpty()) {
                return "文件為空,請重新選擇!";
            }
            // 上傳的圖片
            File path = new File(uploadPath);
            if (!path.exists()) {
                // 創(chuàng)建完整的目錄
                path.mkdirs();
            }
            // 獲取文件原始名(包含后綴名)
            String originalName = file.getOriginalFilename();
            // 獲取文件名（不包括后綴）
            String prefixName = originalName.substring(0, originalName.lastIndexOf("."));
            // 獲取文件后綴 （包括.） 例如：.png
            String suffixName = originalName.substring(originalName.lastIndexOf("."));
            // 這是處理后的新文件名
            String fileName;
            if (originalName.contains(".")) {
                // 示例：avatar.123.png，經(jīng)過處理后得到：avatar.123_1661136943533.png
                fileName = prefixName + "_" + System.currentTimeMillis() + suffixName;
            } else {
                return "上傳圖片格式錯(cuò)誤,請重新選擇！";
            }

            String savePath = path.getPath() + File.separator + fileName;

            File saveFile = new File(savePath);
            // 將上傳的文件復(fù)制到指定目錄
            FileCopyUtils.copy(file.getBytes(), saveFile);
            // 返回給前端的圖片保存路徑；前臺可以根據(jù)返回的路徑拼接完整地址，即可在瀏覽器上預(yù)覽該圖片
            String dest = "images" + File.separator + fileName;

            if (dest.contains("\\")) {
                dest = dest.replace("\\", "/");
            }
            return dest;
        } catch (IOException e) {
            return e.getMessage();
        }
    }
}

配置WebMvcConfigurer，在其addResourceHandlers方法中設(shè)置資源映射

/**
 * @author harry
 * @公眾號 Harry技術(shù)
 */
@Configuration
public class InterceptorConfig implements WebMvcConfigurer {

    @Value("${upload.path}")
    private String uploadPath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // images 是訪問圖片資源的前綴，比如要訪問test1.png
        // 則全路徑為：http://localhost:端口號/images/test1.png
        registry.addResourceHandler("/images/**")
                //此處為設(shè)置服務(wù)端存儲圖片的路徑（前端上傳到后臺的圖片保存位置）
                .addResourceLocations("file:/" + uploadPath);
    }
}

編寫前端進(jìn)行測試，這里采用Apifox模擬圖片上傳，并在瀏覽器中訪問打開