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

用户10604450

发布于 2024-03-15 14:49:45

810

发布于 2024-03-15 14:49:45

文章被收录于专栏：练习两年半练习两年半

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

后端代码

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

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

@Controller
@RequestMapping("/upload")
@CrossOrigin()
public class FileController {

    @Resource
    private 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 {


    @Override
    public 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);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        //  /upload/**为前端URL访问路径  后面 file:xxxx为本地磁盘映射
        registry.addResourceHandler("/upload/**") //虚拟url路径
                .addResourceLocations("file:D:/upload/img/"); //真实本地路径
    }
}

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