欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于图片上传的小

程序员文章站 2022-04-08 16:32:38
...

最基本头像上传功能的-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";//返回前端页面
}

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

相关标签: 上传图片