Springboot+Element ui Vue图片上传回显

最近个人自己做前后端分离项目、遇到了图片上传、简单记录一下。

前端vue element UI部分需要提交的表单数据：

<el-col :span="24"> <el-form-item class="upload" v-if="type!='info' && !ro.touxiang" label="头像" prop="touxiang"><file-uploadtip="点击上传头像"action="file/upload":limit="3":multiple="true":fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"@change="touxiangUploadChange"></file-upload></el-form-item><div v-else><el-form-item v-if="ruleForm.touxiang" label="头像" prop="touxiang"><img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.touxiang.split(',')" :src="item" width="100" height="100"></el-form-item></div></el-col>

后端controller接口：

@Async@RequestMapping("/upload")public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {if (file.isEmpty()) {throw new EIException("上传文件不能为空");}String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);File upload = new File("D:/work/");if(!upload.exists()) {upload.mkdirs();}String fileName = new Date().getTime()+"."+fileExt;File dest = new File(upload+"/"+fileName);file.transferTo(dest);if(StringUtils.isNotBlank(type) && type.equals("1")) {ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));if(configEntity==null) {configEntity = new ConfigEntity();configEntity.setName("faceFile");configEntity.setValue(fileName);} else {configEntity.setValue(fileName);}configService.insertOrUpdate(configEntity);}return R.ok().put("file", fileName);}

Spring boot 配置拦截器Interceptor处理放行等：

@Configurationpublic class InterceptorConfig extends WebMvcConfigurationSupport{@Beanpublic AuthorizationInterceptor getAuthorizationInterceptor() {return new AuthorizationInterceptor();}@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(getAuthorizationInterceptor()).addPathPatterns("/**").excludePathPatterns("/static/**");super.addInterceptors(registry);}/*** springboot 2.0配置WebMvcConfigurationSupport之后，会导致默认配置被覆盖，要访问静态资源需要重写addResourceHandlers方法*/@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/**").addResourceLocations("classpath:/resources/").addResourceLocations("classpath:/static/").addResourceLocations("classpath:/admin/").addResourceLocations("classpath:/front/").addResourceLocations("classpath:/public/");registry.addResourceHandler("/upload/**").addResourceLocations("file:D:/work/");super.addResourceHandlers(registry);}

YML配置：

resources:static-locations: classpath:/testStatic/,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

以上就是springboot配合vue+elementui上传图片回显的方式。