前端如何结合数据库查看本地头像文件，配置静态资源

由于oss过期了，项目中又需要一个上传头像功能，于是研究了一下上传文件至本地，用java将文件存储到本地的代码好写，但是如何利用前端Vue把我难住了，因为之前存在OSS服务器直接查看就可以了，于是记录本文。

后端代码

后端代码如下，写的比较简单，正常应该加一个时间戳，做一下校验，

当然这不是本文的重点，附带加上方便查看

@Controller
@RequestMapping("/upload")
@CrossOrigin()
public class FileController {@Resourceprivate UserService userService;@PostMapping("/image")public String uploadImage(@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {//1.获取上传文件名字String name = file.getOriginalFilename();//2.通过上传文件名字截图后缀名String suffix = name.substring(name.indexOf("."));String path = "D:\\upload\\img\\" + name;// getCanonicalFile 可解析正确各种路径File dest = (new File(path)).getCanonicalFile();// 检测是否存在目录if (!dest.getParentFile().exists() && !dest.getParentFile().mkdirs()) {System.out.println(name + "文件上传失败");return null;} else {// 文件写入file.transferTo(dest);return path;}}
}

前端代码

前端使用的Vue，组件是Vant库

   <template #thumb><van-image :src="hostURL+user.avatarUrl" round width="88" height="88" /></template>//传输图片添加
const hostURL = 'http://localhost:8020/api/upload/'

静态资源配置

:src 根据url显示头像图片，则必须设置WebMVC中的静态资源配置

虚拟路径的配置是在addResourceHandlers方法中，是用虚拟的url路径代替了本地磁盘的路径，最终可以构建的虚拟的url地址为http://loaclhost:8909/upload/**,该路径可用于存于数据库中，用于前端查询出来回显

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:3000").//允许跨域的域名，可以用*表示允许任何域名使用allowedMethods("*"). //允许任何方法（post、get等）allowedHeaders("*"). //允许任何请求头allowCredentials(true). //带上cookie信息//maxAge(3600)表明在3600秒内，不需要再发送预检验请求，可以缓存该结果exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L);}@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry){//  /upload/**为前端URL访问路径  后面 file:xxxx为本地磁盘映射registry.addResourceHandler("/upload/**") //虚拟url路径.addResourceLocations("file:D:/upload/img/"); //真实本地路径}
}

所以对于头像存储，我们只需在用户对象里存储保存的文件名称即可，利用虚拟路径+文件名称即可回显头像，下面我们来看看效果