增加配置,继承 WebMvcConfigurerAdapter,如下:
package com.wm.mogu_picture.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.WebMvcConfigurerAdapter;import java.io.File;/*** @Description: 配置图片访问路径虚拟化* @Date: /6/15* @Auther: wm yu*/@Configurationpublic class AppConfig extends WebMvcConfigurerAdapter {@Value("${mogu.picture.upload}")private String uploadUrl;@Value("${mogu.picture.mapping}")private String mappingUrl;/*** 得到的访问路径为当前项目端口路径 + /upload/image/* @param registry*/@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {/** 说明：增加虚拟路径(经过本人测试：在此处配置的虚拟路径，用springboot内置的tomcat时有效，* 用外部的tomcat也有效;所以用到外部的tomcat时不需在tomcat/config下的相应文件配置虚拟路径了,阿里云linux也没问题)*/registry.addResourceHandler(mappingUrl+"/**").addResourceLocations("file:"+ uploadUrl + File.separator);//阿里云(映射路径去除盘符)//registry.addResourceHandler("/ueditor/image/**").addResourceLocations("/upload/image/");super.addResourceHandlers(registry);}}
在项目中配置虚拟路径和真实路径(图片存储的路径)地址:
#appserver:port: 8602spring:profiles:active: localsecurity: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:
@Overridepublic Response<String> uploadPic(MultipartFile picFile) {if(null == picFile){return Response.createError(MoguBlogContant.UPLOAD_PICTURE_EMPTY);}//上传路径String path = resourceMap.get(MoguBlogContant.PICTURE_PATH);//虚拟路径前缀String mappingPrefix = resourceMap.get(MoguBlogContant.PICTURE_MAPPING_PATH);//TODO 每次上传判断当天是否有文件夹,没有则创建一个,文件名称保持不变,使用redis记录文件,重复则不上传,直接返回虚拟路径//文件名String filename = picFile.getOriginalFilename();File destFile = new File(path + File.separator + filename);try {picFile.transferTo(destFile);//拼接虚拟访问路径String url = mappingPrefix + File.separator + filename;return Response.createSuccess(MoguBlogContant.UPLOAD_PICTURE_SUCCESS,url);} catch (IOException e) {log.error("<uploadPic> 上传图片失败{}",filename,e);return Response.createError(MoguBlogContant.UPLOAD_PICTURE_ERROR);}}
上传成功之后的访问路径为: 配置的项目基础访问路径+虚拟路径+图片名称,如:
http://localhost:8602/upload/image/u=3429654663,2972188411&fm=27&gp=0.jpg
下面是文件上传的组件:(使用的是vue+element):
<el-form-item label="用户头像"><div class="imgBody" v-show="showUpload1"><i class="el-icon-error inputClass" @click="deletePhoto" ></i><img v-if="form.photoList" v-bind:src="form.photoList[0]" /></div><el-uploadclass="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.flix.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("com.wm.mogu_picture.mapper")public class MoguPictureApplication {public static void main(String[] args) {SpringApplication.run(MoguPictureApplication.class, args);}/*** 跨域过滤器* @return*/@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); // 4return new CorsFilter(source);}private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*");corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");return corsConfiguration;}}
看下效果吧:
点击取消图片:
再次上传:
好了,只是贴出重要的代码,先记录吧
如果觉得《spring boot中配置虚拟路径 用来映射显示图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
