SpringBoot图片的新增的记录

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35529931/article/details/82052748

对于图片的新增，有封装好的方法，只是借用了而已。
HTML的方面：

   <div class="layui-row">
            <div class="layui-col-xs12">
                <div class="grid-demo">
                    <div class="layui-form-item">
                        <label class="layui-form-label">维修故障单:</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="maintain-fault-image">图片上传</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-row" style="width: 700px;">
            <div class="layui-col-xs12">
                <div class="grid-demo">
                    <div class="layui-form-item">
                        <div class="layui-upload">
                            <div>
                                <div class="layui-upload-list" id="maintain-fault-imagePreview"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

2。在JS方面，借鉴了项目的一个函数

// 保存维修故障图片
    var maintainfaultImage = [];//存放图片预览时的file文件
    //初始化添加车辆时上传图片的环境
    $("#maintain-fault-imagePreview").empty();
    upload.render({
        elem: '#maintain-fault-image'//“选择文件”按钮的ID
        , auto: false//不自动上传设置
        , accept: 'images'//允许上传的文件类型
        , exts: 'jpg|png|gif|bmp|jpeg'//设置智能上传图片格式文件
        , size: 0.2 * 1024 //最大允许上传的文件大小
        , multiple: true//设置是否多个文件上传
        , number: 3
        , choose: function (obj) {//选中图片后
            if (maintainfaultImage.length >= 3) {
                return;
            }
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();
            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
                maintainfaultImage.push(result);
                if (file.size > 0 && $('#maintain-fault-imagePreview').find('img').length === 0) {
                    $('#maintain-fault-imagePreview').empty();
                }
                // 添加图片
                $('#maintain-fault-imagePreview').append('<div class="image-container" id="container-' + index + '"><div class="delete-css"><button id="upload_img_' + index + '" class="layui-btn layui-btn-danger layui-btn-xs">删除</button></div>' +
                    '<img id="showImg-' + index + '" style="width: 150px; margin:10px;margin-left:15px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
                //删除某一张图片
                $("#upload_img_" + index).bind('click', function () {
                    delete files[index];
                    $("#container-" + index).remove();
                    maintainfaultImage.splice(index, 1);//删除数组中的图片
                });

                //某图片放大预览
                $("#showImg-" + index).bind('click', function () {
                    var width = $("#showImg-" + index).width();
                    var height = $("#showImg-" + index).height();
                    var scaleWH = width / height;
                    var bigH = 600;
                    var bigW = scaleWH * bigH;
                    if (bigW > 900) {
                        bigW = 900;
                        bigH = bigW / scaleWH;
                    }

                    // 放大预览图片
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 1,
                        shadeClose: true,
                        area: [bigW + 'px', bigH + 'px'], //宽高
                        content: "<img width='" + bigW + "' height='" + bigH + "' src=" + result + " />"
                    });
                });

            });
        }
        , done: function (res) {
            if (res) {
                layer.close(index);
            }
        }
    });

在新增的图片时候，只需要将这个DTO传给后台，就可以实现了。

    $scope.modifymaintainDTO.imageMaintainFaults = modifyMaintainfaultImage;

后台方面的做法是，将上传到云服务器的图片转换为url，把url保存到数据库中，方便其他操作。

    // 保存图片
        try {
            List<String> maintainsUrl = microsoftImageUtils.uploadServeralImg(maintainDTO.getImageMaintains(), maintainDTO.getUuid() + "维修清单");
            for (String maintainUrl : maintainsUrl) {
                ImageMaintainPO imageMaintainPO = new ImageMaintainPO();
                imageMaintainPO.setUuid(UuidUtils.getUuid());
                imageMaintainPO.setMaintain_id(maintainPO.getUuid());
                imageMaintainPO.setPath(maintainUrl);
                imageMaintainPOMapper.insert(imageMaintainPO);
                LOGGER.info("车辆故障图片插入成功");
            }

新增图片的剩下的部分，可以将它作为一个实体对待了，就不进行描述了。