vue+springboot實現圖片的上傳及回顯失敗問題的解決

vue+springboot實現圖片的上傳及回顯失敗問題的解決

<div class="upload">
	<input type="file" id="saveImage" accept="image/png,image/gif,image/jpeg" ref="new_image">
    <input type="text" hidden id="hiddenContent" v-model="picAddress">
    <input type="button" value="上傳頭像" @click="submitPhoto()"/>
    <div class="photo">
        <img :src="url" class="img" >
    </div>
</div>

submitPhoto()：

submitPhoto() {
	let self = this;
    if (self.$refs.new_image.files.length !== 0) {
    	let formData = new FormData();
        formData.append('image_data', self.$refs.new_image.files[0]);
            this.$axios.post('api/user/uploadPhoto', formData)
            .then(res => {
                let imgUrl = res.data;
                this.uploadPhotot(imgUrl);
            })
     }
},

這裡的imgUrl就是圖片的路徑，可以在瀏覽器中直接訪問得到的。
uploadPhoto就是把圖片路徑及其他資料存到資料庫的方法。
springboot中這樣寫：

@PostMapping("/uploadPhoto")
@ApiOperation(value = "上傳頭像", notes = "上傳頭像")
public String uploadPhoto(@RequestParam(name = "image_data", required = false) MultipartFile file) throws IOException {
	// 檔案上傳
	String imageName = file.getOriginalFilename();
	String newCompanyImagePath = "";
	if (!file.isEmpty()) {
		try {
			//D:\\Program Files (x86)\\workspace-spring-tool-suite-4-4.6.2.RELEASE\\csi\\src\\main\\resources\\static\\img\\
			newCompanyImagePath = "D:\\Program Files (x86)\\workspace-spring-tool-suite-4-4.6.2.RELEASE\\csi\\src\\main\\resources\\static\\img\\"
						+ imageName;

			File newFile = new File(newCompanyImagePath);
			if (!newFile.exists()) {
				newFile.createNewFile();
			}
			BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(newFile));
			out.write(file.getBytes());
			out.flush();
			out.close();
		} catch (FileNotFoundException e) {
			e.printStackTrace();
			return "圖片上傳失敗！";
		} catch (IOException e) {
			e.printStackTrace();
			return "圖片上傳失敗！";
		}
	}
	String imagePath = "http://localhost:8888/static/img/" + imageName;
	return imagePath;
}

上面的newCompanyImagePath 就是該專案中存放圖片的資料夾的絕對路徑
專案結構如下：

還有一個問題就是新上傳一張圖片之後，回顯會失敗，要重新整理後端專案img資料夾，重新執行專案才能顯示出來，怎麼解決這個問題呢？
這裡我們可以通過虛擬路徑對映的方法來解決。
在後端專案中新增一個類：

//新增加一個類用來新增虛擬路徑對映
@Configuration
public class MyPicConfig implements WebMvcConfigurer{
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/img/**")
        .addResourceLocations("file:D:/Program Files (x86)/workspace-spring-tool-suite-4-4.6.2.RELEASE/csi/src/main/resources/static/img/");
    }
}