spring boot中配置虚拟路径,用来映射显示图片

增加配置,继承 WebMvcConfigurerAdapter,如下:

package .mogu_picture.config;



 



import .factory.annotation.Value;



import .Configuration;



import ;



import ;



 



import .File;



 




/**




 * @Description: 配置图片访问路径虚拟化



 * @Date: 2019/6/15



 * @Auther: wm yu



 */



@Configuration




public class AppConfig extends WebMvcConfigurerAdapter {



 



    @Value("${}")



    private String uploadUrl;



 



    @Value("${}")



    private String mappingUrl;



 



    /**




     * 得到的访问路径为当前项目端口路径 + /upload/image/



     * @param registry



     */



    @Override




    public void addResourceHandlers(ResourceHandlerRegistry registry) {



        /*




         * 说明：增加虚拟路径(经过本人测试：在此处配置的虚拟路径，用springboot内置的tomcat时有效，



         * 用外部的tomcat也有效;所以用到外部的tomcat时不需在tomcat/config下的相应文件配置虚拟路径了,阿里云linux也没问题)



         */




        (mappingUrl+"/**").addResourceLocations("file:"+ uploadUrl + File.separator);



        //阿里云(映射路径去除盘符)



        //("/ueditor/image/**").addResourceLocations("/upload/image/");



        super.addResourceHandlers(registry);



    }



}

在项目中配置虚拟路径和真实路径(图片存储的路径)地址:

#app



server:



  port: 8602



spring:



  profiles:



    active: local




 



 



security:



  basic:



    enabled: false   #spring boot中默认引入security的依赖就开启了security的功能,这里先禁用自动生效




 



mogu:



  picture:



    upload: C:\mogu    #定义文件上传的路径,真实地址




    mapping: /upload/image

上传图片的方法:

controller:

  @PostMapping("/uploadPic")



    @ApiOperation(value = "图片上传", notes = "图片上传")



    public Response<String> uploadPic(MultipartFile picFile){



        if(null == picFile){



            return Response.createError(MoguBlogContant.UPLOAD_PICTURE_EMPTY);



        }



        return fileService.uploadPic(picFile);



    }

 

service:

 @Override




    public Response<String> uploadPic(MultipartFile picFile) {



        if(null == picFile){



            return (MoguBlogContant.UPLOAD_PICTURE_EMPTY);



        }



        //上传路径



        String path = resourceMap.get(MoguBlogContant.PICTURE_PATH);



        //虚拟路径前缀



        String mappingPrefix = resourceMap.get(MoguBlogContant.PICTURE_MAPPING_PATH);



        //TODO 每次上传判断当天是否有文件夹,没有则创建一个,文件名称保持不变,使用redis记录文件,重复则不上传,直接返回虚拟路径



        //文件名



        String filename = ();



        File destFile = new File(path + File.separator + filename);



        try {



            (destFile);



            //拼接虚拟访问路径



            String url = mappingPrefix + File.separator + filename;



            return (MoguBlogContant.UPLOAD_PICTURE_SUCCESS,url);



        } catch (IOException e) {



           log.error("<uploadPic> 上传图片失败{}",filename,e);



           return (MoguBlogContant.UPLOAD_PICTURE_ERROR);



        }



    }

 

上传成功之后的访问路径为:  配置的项目基础访问路径+虚拟路径+图片名称,如:

http://localhost:8602/upload/image/u=3429654663,2972188411&fm=27&gp=

 

下面是文件上传的组件:(使用的是vue+element):

 <el-form-item label="用户头像">




 



            <div class="imgBody"  v-show="showUpload1">




              <i class="el-icon-error inputClass" @click="deletePhoto" ></i>




              <img v-if="" v-bind:src="[0]" />




            </div>




 



            <el-upload



              class="upload-demo"




              drag



              :action = "pictureLoad()"




              name="picFile"




              v-show="showUpload2"




              :before-upload="beforeAvatarUpload"




              :on-success="uploadSuccess">




              <i class="el-icon-upload"></i>




              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>




              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>




            </el-upload>




 



          </el-form-item>

注意name="picFile"需要和后端的名称一致

还有注意需要后端处理跨域问题,如下代码:  在启动类中配置

package com.wm.mogu_picture;



 




import org.springframework.boot.SpringApplication;




import org.springframework.boot.autoconfigure.SpringBootApplication;




import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;




import org.springframework.boot.autoconfigure.velocity.VelocityAutoConfiguration;




import org.springframework.cloud.netflix.eureka.EnableEurekaClient;




import org.springframework.context.annotation.Bean;




import org.springframework.web.cors.CorsConfiguration;




import org.springframework.web.cors.UrlBasedCorsConfigurationSource;




import org.springframework.web.filter.CorsFilter;




import springfox.documentation.swagger2.annotations.EnableSwagger2;




import tk.mybatis.spring.annotation.MapperScan;



 




@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class,VelocityAutoConfiguration.class})



@EnableSwagger2




@EnableEurekaClient   //注册到eureka,作为client





@MapperScan(".mogu_picture.mapper")




public class MoguPictureApplication {



 



    public static void main(String[] args) {



        SpringApplication.run(MoguPictureApplication.class, args);



    }



 



 



    /**




     * 跨域过滤器



     * @return



     */



    @Bean




    public CorsFilter corsFilter() {



        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();



        source.registerCorsConfiguration("/**", buildConfig()); // 4




        return new CorsFilter(source);



    }



 



    private CorsConfiguration buildConfig() {



        CorsConfiguration corsConfiguration = new CorsConfiguration();



        corsConfiguration.addAllowedOrigin("*");



        corsConfiguration.addAllowedHeader("*");



        corsConfiguration.addAllowedMethod("*");



        return corsConfiguration;



    }



}

 

看下效果吧:

点击取消图片:

再次上传:

 

好了,只是贴出重要的代码,先记录吧