springboot图片上传展示(利用虚拟路径)

springboot项目上传图片，保存到

D:\upload\image\img_picture\

目录下，同时想要在项目中展示此图片，通过如下链接

·http://localhost:8080/项目名/images/图片名称·

这种方式展示，这要怎么做呢？

首先，我们现在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;    }
  }

下面是具体使用，代码

页面代码
<form class="form-horizontal"  id="myform" enctype="multipart/form-data">
...//如果有其他要携带的参数，可以用input标签添加
      <input  id="testImg1"  name="testImg1" type="file" >  
      <input type="button" class="btn btn-primary" id="btnSaveOrUpdate" data-loading-text="保存中..." @click="saveOrUpdate" value="确定"/>
 </form>
 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<NatDao, NatEntity> 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来就可以展示了