SpringBoot如何上傳圖片到指定位置并返回URL

這篇文章將為大家詳細(xì)講解有關(guān)SpringBoot如何上傳圖片到指定位置并返回URL，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

需求

前端的圖片上傳到服務(wù)器指定的文件目錄，并且將URL返回給前端

前端部分（ElementUI+Vue.js）

ElementUI的導(dǎo)入和使用：(組件 | Element)

Vue.js的導(dǎo)入和使用：(Vue.js (vuejs.org))

<template>
  <div class="form-group">
    <el-upload
        action="http://localhost:8081/upload"
        :on-preview="handlePreview"
        accept='.jpg'
        :limit="10"
    >
        <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
        <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>
    </el-upload>
  </div>
</template>

<script>

export default {
    name: "updateImg",
    methods:{
        handlePreview(file){
            window.open(file.response.url);
            console.log(file.response.url);
        }
    }
}
</script>

<style scoped>

</style>

效果：

后端部分（SpringBoot）

1.先配置application.yml文件

file-save-path：要保存圖片的位置 早上遇到404問(wèn)題是因?yàn)?在 配置file-save-path時(shí)候 沒(méi)有在最后的 images后加上 ‘\’ 導(dǎo)致路徑無(wú)法匹配到

server:
  port: 8081
  
file-save-path: D:\SoftWare\SpringToolSuite\WorkPlace\HelloWorld\src\main\resources\static\images\
spring:
  mvc:
    view:
      prefix: /
      suffix: .jsp

2.映射資源-重寫(xiě)WebMvcConfigurer接口，實(shí)現(xiàn)對(duì)資源的映射

package com.etc.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer{
	
	@Value("${file-save-path}")
	private String fileSavePath;
	
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/images/**").addResourceLocations("file:"+fileSavePath);
		//System.out.println("file:"+fileSavePath);
	}

}

addResourceHandler("/images/**")表示凡事以 /images/ 路徑發(fā)起請(qǐng)求的，按照 addResourceLocations("file:"+fileSavePath)的路徑進(jìn)行映射

例如有一個(gè)url：http://localhost:8081/images/Hello.jpg

表示要對(duì)Hello.jpg進(jìn)行請(qǐng)求訪問(wèn)，這時(shí)候服務(wù)器會(huì)把這個(gè)請(qǐng)求的資源映射到我們配置的路徑之下 也就是會(huì)到 fileSavePath 下去尋找 是否有 Hello.jpg 這個(gè)資源，返回給前端頁(yè)面。

3.Controller代碼

這邊為了方便使用Map進(jìn)行返回，實(shí)際開(kāi)發(fā)中使用封裝好的類(lèi)型進(jìn)行返回

package com.etc.controller;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.sound.midi.SysexMessage;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@CrossOrigin
@RestController
public class ImgUploadController {

	SimpleDateFormat sdf = new SimpleDateFormat("/yyyy.MM.dd/");
	
	@Value("${file-save-path}")
	private String fileSavePath;
	
	@PostMapping("/upload")
	public Map<String, Object> fileupload(MultipartFile file,HttpServletRequest req){
		
		Map<String,Object> result = new HashMap<>();
		//獲取文件的名字
		String originName = file.getOriginalFilename();
		System.out.println("originName:"+originName);
		//判斷文件類(lèi)型
		if(!originName.endsWith(".jpg")) {
			result.put("status","error");
			result.put("msg", "文件類(lèi)型不對(duì)");
			return result;
		}
		//給上傳的文件新建目錄
		String format = sdf.format(new Date());
		String realPath = fileSavePath + format;
		System.out.println("realPath:"+realPath);
		//若目錄不存在則創(chuàng)建目錄
		File folder = new File(realPath);
		if(! folder.exists()) {
			folder.mkdirs();
		}
		//給上傳文件取新的名字，避免重名
		String newName = UUID.randomUUID().toString() + ".jpg";
		try {
			//生成文件，folder為文件目錄，newName為文件名
			file.transferTo(new File(folder,newName));
			//生成返回給前端的url
			String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() +"/images"+ format + newName;
			System.out.println("url:"+url);
			//返回URL
			result.put("status", "success");
			result.put("url", url);
 		}catch (IOException e) {
			// TODO Auto-generated catch block
 			result.put("status", "error");
 			result.put("msg",e.getMessage());
		}
		return result;
				
	}
}

關(guān)于“SpringBoot如何上傳圖片到指定位置并返回URL”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。