Springboot+Element ui Vue图片上传回显

举报
Java李杨勇 发表于 2022/02/28 22:47:33 2022/02/28
【摘要】 最近个人自己做前后端分离项目、遇到了图片上传、简单记录一下。前端vue element UI部分需要提交的表单数据如下: <el-col :span="24"> <el-form-item class="upload" v-if="type!='info' && !ro.touxiang" label="头像文件" prop="touxiang"> <f...

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

前端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天

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


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。