Springboot+Element ui Vue图片上传回显

Dear 丶 2023-10-01 19:33 13阅读 0赞

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

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

<el-col :span="24">  
            <el-form-item class="upload" v-if="type!='info' && !ro.touxiang" label="头像" prop="touxiang">
              <file-upload
              tip="点击上传头像"
              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 配置[拦截器][Link 1]Interceptor处理放行等：

@Configuration
    public class InterceptorConfig extends WebMvcConfigurationSupport{
    
    	@Bean
        public AuthorizationInterceptor getAuthorizationInterceptor() {
            return new AuthorizationInterceptor();
        }
    
    	@Override
        public void addInterceptors(InterceptorRegistry registry) {
            registry.addInterceptor(getAuthorizationInterceptor()).addPathPatterns("/**").excludePathPatterns("/static/**");
            super.addInterceptors(registry);
    	}
    
    	/**
    	 * springboot 2.0配置WebMvcConfigurationSupport之后，会导致默认配置被覆盖，要访问静态资源需要重写addResourceHandlers方法
    	 */
    	@Override
        public 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上传图片回显的方式。

[Link 1]: https://so.csdn.net/so/search?q=%E6%8B%A6%E6%88%AA%E5%99%A8&spm=1001.2101.3001.7020