“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">
          <file-upload
          tip="Click upload profile"
          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="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">
          </el-form-item>
        </div>
      </el-col>
Copy the code

Back-end Controller interface:

@Async
	@RequestMapping("/upload")
	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);

		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);
	}
Copy the code

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

@Configuration
public class InterceptorConfig extends WebMvcConfigurationSupport{

	@Bean
    public AuthorizationInterceptor getAuthorizationInterceptor(a) {
        return new AuthorizationInterceptor();
    }

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

	/ * * * 2.0 configuration springboot WebMvcConfigurationSupport, leads to the default configuration is covered, static resource needs to be rewritten to allow access to * / addResourceHandlers method
	@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);
    }
Copy the code

YML config file load static resource file:

 resources:
      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 ~!