spring boot单/多图片上传并展示以及回显：js；限制图片容量；listString转化；thymeleaf判断List为空

最新推荐文章于 2022-12-07 20:02:06 发布

曾念念

最新推荐文章于 2022-12-07 20:02:06 发布

阅读量974

点赞数 1

分类专栏： javaweb

本文链接：https://blog.csdn.net/n20164206199/article/details/104271144

版权

本文档详细介绍了如何在Spring Boot项目中实现单图和多图上传，同时解决图片容量限制、List<String>与String转换及Thymeleaf判断List是否为空的问题。通过创建用户特定的文件夹存储图片，并在前端使用background-image展示。上传过程包括单图和多图，多图上传时限制了图片容量，并在服务端实现了路径的存储与分割。

摘要由CSDN通过智能技术生成

本章讲述：

springboot项目实现单/多图片上传以及解决途中
限制上传图片容量
list、String的转化
thymeleaf判断List<String>为不为空的问题
前端插入background-image

效果：图片均存储在项目中以各个用户的Id命名的文件夹内；
在这里插入图片描述

效果：上传一张图片：（可以做头像的）点击上传封面、选择图片、并且展示-
在这里插入图片描述

上传多张图片：点击选择图片：最多选择三张、并且展示
在这里插入图片描述

发布成功后：以第一张为首页

在这里插入图片描述

0.创建上传图片的文件夹

	private String filePath = "src/main/resources/static/upload-dir";
    private String realPath = "src/main/resources/static/upload-dir";

    private Path rootLocation;

    /**
     * 创建上传图片的文件夹
     * @param account_Id 用户Id 每个用户拥有单独的文件夹
     */
    public void ProductionService(String account_Id) {
   
        if(StringUtils.isBlank(account_Id)){
   
            throw new CustomizeCodeException(ErrorCodeEnumImp.NO_LOGIN);
        }
        if(realPath.contains(account_Id)){
   
            realPath=realPath;
        }else{
   
            realPath=filePath+"/"+account_Id;
        }
        this.rootLocation = Paths.get(realPath);
        try {
   
            Files.createDirectories(rootLocation);
        } catch (IOException e) {
   
            throw new CustomizeCodeException(ErrorCodeEnumImp.FAIL_INITSTORAGE);
        }
    }

1.上传并回显一张图片

前端显示

```html
<!--上传图片-->
<div class="list-content">
  <div class="block">
      <div class="main">
          <div id="container" class="file-container">
              <div class="cover">
                <!--如果不需要回显图片，src留空即可-->
                <img class="upload-img" th:src="@{${pic}}" th:if="${pic} != null" /><div class="cover-text">上传封面</div>
                <img th:if="${pic} == null"  class="upload-img-cover" th:src="@{images/download.png}"/><div class="cover-text">上传封面</div>
                <img th:if="${pic} == null"  class="upload-img-cover" th:src="@{/images/download.png}"/><div class="cover-text">上传封面</div>

                <input type="file" class="file" name="pic" id="upload" accept="image/gif, image/jpeg, image/jpg, image/png">
                <input type="hidden" name="pictext" th:value="${pictext}" />
            </div>
  		</div>
	</div>
      <script>
          $("#upload").change(function () {
              var filePath = $(this)[0].files[0];// 获取input上传的文件

              if (filePath.name) {
                  alter("未选择封面");
              } else {
                  var url = window.URL.createObjectURL(filePatha); //将上传的文件转化为url
              		$('#container img').attr('src', url);
             		$('#container img').attr('class',"upload-img-cover upload-img"); 
                  }
                  console.log(url);
              }
          });
      </script>
    </div>
</div>

Controller获取
pictext是为了存取图片存取路径；防止如果不修改图片的话，图片路径会清空

/*新建/更新发布*/
@PostMapping("/publish")
public String doPublish(@RequestParam(value = "pic", required = false) MultipartFile pic,
						@RequestParam(value = "pictext" , required =  false)String pictext,
                            HttpServletRequest request,
                            Model model){
   
	if (pic.isEmpty()&&StringUtils.isBlank(pictext)) {
   
            model.addAttribute("error", "图片不能为空");
            return "publish";
        }
    User user = null;
      user = (User) request.getSession().getAttribute("user");
      if (user == null || "".equals(user.getName())) {
   
          model.addAttribute("error", "请先登录");
          return "publish";
      }
      String fileName = pic.getOriginalFilename();
      String suffixName = fileName.substring(fileName.lastIndexOf("."));
      //fileName= "zhenbao-"+UUID.randomUUID()+suffixName;
      fileName = user