SpringBoot记录展示图片和修改图片

1.HTML的写法：
这里写图片描述

  <div  id="maintainImgMaintains">
                    </div>

主要是在JS中的写法：
这里写图片描述

     for (var imageMaintains in result.data.imageMaintains) {
                    var uuid = result.data.imageMaintains[imageMaintains].uuid;
                    var imgHtml = "  <img style='width: 150px; margin:10px;margin-left:15px;cursor:pointer;' onclick='viewPicture(this)'  src=\"" + result.data.imageMaintains[imageMaintains].path + "\">";
                    var imgHtml1 = "<button type='button' id='" + uuid + "'  class=\"layui-btn layui-btn-danger layui-btn-xs\" onclick='deleteImageMaintains(this)'  >删除</button> ";
                    $("#maintainImgMaintains").append(imgHtml + imgHtml1);
                }

现在解决了图片的展示了，接下来就是做图片的修改了。图片修改不能像实体那样修改，所以我开始的做法是先删除，然后在新增图片图片。
遇到的困难就是，如何将展示在这个div里面的图片，与新增的图片绑定在一起，传给后台？这个bug弄了很久，最后还是组长写了一个，才解决了。感慨自己的技术菜啊！
1.HTML这块的话，用了一个input的hidden。
这里写图片描述

 <input id="imageMaintainsDel" type="text" hidden="hidden"/>

2.JS这块的话，比较多。
首先是给对象新增了一个属性，用来存储展示的图片，新增的图片，依旧用原先的那个存储。对此，在DTO中，新增一个属性。
2.1在移除一张图片的时候，将其对应的ID记录下来，传递到后台，进行删除操作。
这里写图片描述


function deleteImageMaintainFaults(obj) {
    var id = obj.id;
    $(obj).prev().remove();
    $(obj).remove();
    $("#imageMaintainFaultsDel").val($("#imageMaintainFaultsDel").val() + "," + id);
}

然后用新属性保存这个图片：
这里写图片描述

  $scope.modifymaintainDTO.imageMaintainFreesDel = $("#imageMaintainFreesDel").val().split(",");
                        $scope.modifymaintainDTO.imageMaintainFaultsDel = $("#imageMaintainFaultsDel").val().split(",");
                        $scope.modifymaintainDTO.imageMaintainsDel = $("#imageMaintainsDel").val().split(",");

对此，前端这么复杂的这块解决了，图片传递到了后台。
dao层的删除是根据ID进行删除，略；
Service中的写法：

  if (!CollectionUtils.isEmpty(maintainDTO.getImageMaintainsDel())) {
            for (String id : maintainDTO.getImageMaintainsDel()) {
                if (!StringUtils.isEmpty(id)) {
                    imageMaintainPOMapper.deleteByUUId(id);
                }
            }
        }

：从后台取到图片的ID之后，将图片的ID存储到DTO中，通过这个方法判断是否有ID存在，有并且点击了移除，就在后台删除掉了图片。至于新增的图片，通过上一讲的新增进行保存。这样便是一个图片的修改。我当时一直在纠结怎么把二进制留和一个url合成一个对象，一起传到后台。却没有想到，只需要把ID传到后台，单独删除就行，另一个通过另一个属性传到后台进行新增即可。
controller层的写法跟图片修改的一起带到后台，一个url,不进行阐述了。
为此，这次的任务完成了，新增修改带图片的。

SpringBoot记录展示图片和修改图片

猜你喜欢