“This is my 27th day of participating in the First Challenge 2022. For more details: First Challenge 2022

Recently, I did my own front and back end separation project, met the picture upload, simple record.

The form data that needs to be submitted in the front-end Vue Element UI section is as follows:

  <el-col :span="24">  
        <el-form-item class="upload" v-if="type! ='info' && ! ro.touxiang" label="Avatar file" prop="touxiang">
          tip="Click upload profile"
          :fileUrls="ruleForm.touxiang? ruleForm.touxiang:''"
        <div v-else>
          <el-form-item v-if="ruleForm.touxiang" label="Avatar" 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">
Copy the code

Back-end Controller interface:

	public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {
		if (file.isEmpty()) {
			throw new EIException("Upload file cannot be empty");
		String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") +1);
		File upload = new File("D:/work/");// This is just for reference. The path suggestion is written in the configuration file
		if(! upload.exists()) { upload.mkdirs(); } String fileName =new Date().getTime()+"."+fileExt;
		File dest = new File(upload+"/"+fileName);

		if(StringUtils.isNotBlank(type) && type.equals("1")) {
			ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name"."faceFile"));
			if(configEntity==null) {
				configEntity = new ConfigEntity();
			} else {
		return R.ok().put("file", fileName);
Copy the code

Spring Boot provides the Interceptor to handle the release, etc.

public class InterceptorConfig extends WebMvcConfigurationSupport{

    public AuthorizationInterceptor getAuthorizationInterceptor(a) {
        return new AuthorizationInterceptor();

    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(getAuthorizationInterceptor()).addPathPatterns("/ * *").excludePathPatterns("/static/**");

	/ * * * 2.0 configuration springboot WebMvcConfigurationSupport, leads to the default configuration is covered, static resource needs to be rewritten to allow access to * / addResourceHandlers method
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/ * *")
Copy the code

YML config file load static resource file:

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

That’s how SpringBoot works with Vue + elementUI to upload image echoes.

Clocked articles updated 201/365 days

Everyone can like, favorites, follow, comment on me ~!