Springboot+Element ui Vue图片上传回显

​ 「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战

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

前端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 配置拦截器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上传图片回显的方式。 

打卡 文章 更新  201 /  365天

大家可以点赞、收藏、关注、评论我啦 ~！