首页 > 其他分享> > 基于SSM的照片添加照片删除Demo

基于SSM的照片添加照片删除Demo

2022-03-20 16:03:09 作者：互联网

1：环境

Maven工程
Spring
SpringMVC
MyBatis
LomBok
thymeleaf
文件上传解析器

两个小小的功能，主要是实现文件上传。
在这里插入图片描述

2：Maven依赖

    <!--文件上传依赖-->
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>

3：主要的代码

SpringMVC依赖文件上传解析器上传文件：
以照片为例子，上传后的照片存于target中，而照片名字通过uuid和照片后缀组合而成。数据库存储的照片类路径是 imgs/照片名，页面直接就可以访问到照片。
在这里插入图片描述

照片上传前台页面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--文件上传-->
<form th:action="@{/add}" method="post" enctype="multipart/form-data">
    PhotoName:<input type="text" name="imgName">
    Photo:<input type="file" name="photoImgFile"><br>
    <input type="submit" value="add">
</form>

</body>
</html>

Ctroller层：

 @RequestMapping(value = "/add")
    public String addImg(String imgName, MultipartFile photoImgFile, HttpServletRequest request){
        Photo photo=new Photo();
        photo.setImgName(imgName);
        photo = photoUp.upPhoto(photo, photoImgFile, request);
        photoService.AddPhoto(photo);
        return "redirect:/";
    }

文件上传解析工具类：

@Component
public class PhotoUp {

        public Photo  upPhoto(Photo photo, MultipartFile photoImgFile, HttpServletRequest request){


            //1:获取上传文件的文件名
            String originalFilename =photoImgFile.getOriginalFilename();

            //2:通过文件名截取文件后缀
            String suffixName=originalFilename.substring(originalFilename.lastIndexOf('.'));

            //3:使用UUID+后缀生成文件名
            String fileName= UUID.randomUUID().toString()+suffixName;

            //4:获取imgs目录在服务器路径 如果imgs没有任何内容，则target没有imgs目录
            String imgsPath=request.getServletContext().getRealPath("imgs");

            //5:判断imgs路径是否存在，如果imgs目录不存在则创建imgs目录
            File file=new File(imgsPath);
            if(!file.exists()){
                file.mkdir();
            }

            //6:保存文件  文件保存路径+File.separator(分隔符)+文件名
            String FinalPath=imgsPath+File.separator+fileName;

            try {
                photoImgFile.transferTo(new File(FinalPath));
            } catch (IOException e) {
                e.printStackTrace();
            }
            //7:设置Book对象的封面信息(即服务器访问路径 imgs+文件名)
            photo.setImgPath("imgs/"+fileName);

            //8:文件上传日期
            Date date=new Date();
            java.sql.Date newDate=new java.sql.Date(date.getTime());
            photo.setImgDate(newDate);

            return photo;

        }

}

照片展示页面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<table id="dataTable" border="1" cellspacing="0" style="text-align: center">

  <tr>
    <th colspan="5">img</th>
  </tr>
  <tr>
    <th>id</th>
    <th>imgName</th>
    <th>imgDate</th>
    <th>img</th>
    <th>options(<a th:href="@{/toAdd}">add</a> )</th>
  </tr>
    <!--循环遍历所有照片-->
    <tr th:each="photo:${photos}">
    <td th:text="${photo.imgId}"></td>
    <td th:text="${photo.imgName}"></td>
    <td th:text="${photo.imgDate}"></td>
    <td >
      <!--数据库保存的imgPath=imgs/xxx.jpg 直接可以访问到照片-->
      <img th:src="${photo.imgPath}" width="280px" height="280px">
    </td>
    <td>
      <!--删除照片，参数id为url的一部分 比如删除Id为1的照片 /del/1 -->
      <a th:href="@{'/del/'+${photo.imgId}}">delete</a>
    </td>
  </tr>
</table>

标签：SSM,String,文件,Demo,照片,photo,imgs,上传
来源： https://blog.csdn.net/hd_cash/article/details/123614467