关于图片上传的小demo

最基本头像上传功能的-wangedit+springboot+thymleaf

1.上传时要配置虚拟路径和静态资源访问

web:
  base: http://localhost:8888/mbtt/
  upload-path: D:/image/
  
resources:
  static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.upload-path}

2前端页面展现

<img  src="asserts/img/1.png" th:src="@{${pif.resumeHead}}" name="resumehead" data-toggle="modal" data-target="#imgModal" >//th:src是提取数据库头像存储时的文件名

//用bootstrap模态框做的上传头像,此处是关键代码   id一定要写后边要用到
<input type="file"  name="uploadimage" id="uploadimage">

3.引入一个wangedit.js 的静态资源

4.控制器代码

   @Value("${web.base}")
    private String base;
    /*上传文件虚拟路径*/
    @Value("${web.upload-path}")
    private String path;

    
    @PostMapping("/upload")
public String uploadImg(@RequestParam(value = "uploadimage") MultipartFile uploadimage, Model model) {// value值为前边input的id属性
    String realName = "";
    PersonalInfo personalInfo = personalInfoService.searchInfoByUserId(:1L);
    if (!uploadimage.isEmpty()) {
        try {
            String fileName = uploadimage.getOriginalFilename();//获取图片的名字
            realName = System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf(".")); // 数据库插入防重复 命名
            File uploadFile = new File(path, realName);//io流写入本地文件
            uploadimage.transferTo(uploadFile); //调用一个transferTo
            personalInfo.setResumeHead(realName); 将文件路径作为参数传入对象中
            personalInfoService.editPersonalInfo(personalInfo);//调用自己写的方法将图片名写入数据库中
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    model.addAttribute("pif", personalInfo);
    return "myresume";//返回前端页面
}

纪念自己第一次写博客,写的不好,勿喷