springboot圖片上傳展示（利用虛擬路徑）

springboot專案上傳圖片，儲存到

D：\upload\image\img_picture\

目錄下，同時想要在專案中展示此圖片，透過如下連結

·

這種方式展示，這要怎麼做呢？

首先，我們現在application。yml中配置一下

file：

staticAccessPath： /images/**

uploadFolder： D：\lenglian\upload\image\img_picture\

staticStorePath： /storeImages/**

storePath： D：\lenglian\upload\image\store\

img：

url： http：//localhost：8080/專案名/images/

其次，我們要寫一個檔案上傳的類

@Component

@Configuration

@ConfigurationProperties（prefix=“file”）

public class UploadFilePathConfig implements WebMvcConfigurer {

@Value（“${server。port}”）

private String port；

@Value（“${file。staticAccessPath}”）

private String staticAccessPath；

@Value（“${file。uploadFolder}”）

private String uploadFolder；

@Value（“${file。staticStorePath}”）

private String staticStorePath；

@Value（“${file。storePath}”）

private String storePath；

/**

* 重寫這個方法即可配置虛擬路徑

* registry

*/

@Override

public void addResourceHandlers（ResourceHandlerRegistry registry） {

registry。addResourceHandler（staticAccessPath）。addResourceLocations（“file：” + uploadFolder）；

registry。addResourceHandler（staticStorePath）。addResourceLocations（“file：” + storePath）；

}

public String getPort（） {        return port；    }

public void setPort（String port） {        this。port = port；    }

public String getStaticAccessPath（） {        return staticAccessPath；    }

public void setStaticAccessPath（String staticAccessPath） {        this。staticAccessPath = staticAccessPath；    }

public String getUploadFolder（） {        return uploadFolder；    }

public void setUploadFolder（String uploadFolder） {        this。uploadFolder = uploadFolder；    }

}

下面是具體使用，程式碼

頁面程式碼

。。。//如果有其他要攜帶的引數，可以用input標籤新增

js程式碼

saveOrUpdate： function （event） {

var form = new FormData（document。getElementById（“myform”））；

$（‘#btnSaveOrUpdate’）。button（‘loading’）。delay（1000）。queue（function（） {

var url = “business/nat/save”；

$。ajax（{

type： “POST”，

url： baseURL + url，

dataType：‘json’，

contentType： false， // 關關關！必須得 false

processData： false， // 關關關！重點

async：false，

//data ： $（‘#from-pro’）。serialize（）， //包含檔案時，後臺無法接收會報錯

data ： form，

success： function（r）{

if（r。code === 0）{

layer。msg（“操作成功”， {icon： 1}）；

}else{

layer。alert（r。msg）；

}

}

}）；

}）；

}

後臺程式碼controller

這裡只列出如何接收引數

@RequestMapping（“/save”）

public R save（NatEntity nat，@RequestParam（value=“testImg1”，required=false） MultipartFile testImg1）{

//業務程式碼xxxx

｝

service層程式碼

@Service（“natService”）

public class NatServiceImpl extends ServiceImpl implements NatService {

@Autowired

private UploadFilePathConfig uploadFilePathConfig；

@Value（“${img。url}”）private String imgurl；

@Override

@Transactional（rollbackFor = Exception。class）

public R saveInfo（NatEntity nat， MultipartFile testImg1） {

SysUserEntity userEntity = ShiroUtils。getUserEntity（）；

String url2 = “”；

if （null ！= testImg1 && ！“”。equals（testImg1。getOriginalFilename（））） {

// 物理路徑（跟專案平級）

String filename2 = testImg1。getOriginalFilename（）；

String prefix2 = filename2。substring（filename2。lastIndexOf（“。”） + 1）。toUpperCase（）；

String reString2 = yanzheng（testImg1， prefix2）；

if （！“”。equals（reString2）） {            return R。error（reString2）；        }

// 儲存圖片資訊

url2 = UUIdUtil。getUUid（） + “。” + prefix2；

try {

FileUtils。writeByteArrayToFile（new File（uploadFilePathConfig。getUploadFolder（）+url2）， testImg1。getBytes（））；

nat。setNatUrl（imgurl+url2）；

} catch （IOException e） {

logger。error（“圖片上傳失敗”，e）；

throw new RRException（“圖片上傳失敗”）；

}

}

this。save（nat）；

return R。ok（）；

}

｝

如上就可以將圖片儲存到我們指定的磁碟中，在專案中展示的時候只要直接取出naturl來就可以展示了