“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 ~!