二手商城商品发布时多张图片上传和存储的解决办法

用户在发布二手商品时，需要填写二手商品的一些信息，然后上传详情图，如下图所示：

但是用户发布的图片可能不止一张，图片上传成功后怎么把图片的路径存到数据库中。

有两种方法，一种是把所有的路径通过拼接，以特殊符号隔开，如“；”，然后存到一个字段中，取出时再根据分隔符分割取出。

第二种是单独用一张表，存储图片路径和对应的商品id.

我选择的是第二种。

那么数据都是同时传到后台的，商品信息还没存储，也就没有商品id，所以我们处理时要有先后顺序，先存储商品信息，然后找出商品id后再存储图片。

上代码。

js：

<script>
    var element = layui.element;
    var $ = layui.jquery;
    var upload = layui.upload;
    var img = [];
    var i  = 0;
    upload.render({
        elem: '#shopImg'
        ,url: '/upLoadImg/shop' //改成您自己的上传接口
        ,multiple: true
        ,number:5
        ,before: function(obj){
            layer.load();
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#shopImgDemo').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
            });
        }
        // , progress: function(n, elem){
        //
        // }
        ,allDone: function(obj){ //当文件全部被提交后，才触发
            // console.log(obj.total); //得到总文件数
            // console.log(obj.successful); //请求成功的文件数
            // console.log(obj.aborted); //请求失败的文件数
            layer.closeAll('loading');
            layer.msg('上传图片数：'+obj.total+'；上传成功数：'+obj.successful+'；上传失败数：'+obj.aborted);
        }
        ,done: function(res){
            if (res.code==1){
                // console.log(res.data.src);
                img[i]=res.data.src;
                i++;
            }
        }
    });
</script>
<script>
    var form = layui.form;
    //监听提交
    form.on('submit(addShop)', function(data){
        // layer.msg(JSON.stringify(data.field));
        // console.log(img);
        var shopJson = eval("("+JSON.stringify(data.field)+")");
        $.ajax({
            type:"post",
            url:"/addShop",
            data:{
                title:shopJson.title,
                detail:shopJson.detail,
                oldMoney:shopJson.oldMoney,
                money:shopJson.money,
                type: shopJson.type,
                img:img
            },
            datatype:"json",
            success:function (data) {
                if (data.code==0){
                    layer.msg('非法请求!',{icon:2});
                }else if (data.code==1){
                    layer.confirm('发布成功，是否前往查看商品详情?', {
                        btn: ['确定','再发布一个'] //按钮
                        ,closeBtn:0
                        ,title:"是否跳转"
                        ,btnAlign: 'c'
                    }, function(){
                        location.href="shopDetail?shopId="+data.shopId;
                    }, function(){
                        location.reload();
                    });
                }else {
                    layer.msg('发布失败！请稍候再试！',{icon:5});
                }
            }
            ,error:function () {
                layer.msg('网络错误！请稍候再试或联系管理员！',{icon:2});
            }
        })
        return false;
    });
</script>

这里我用的是layui的多图片上传，先定义一个全局数组img，然后上传成功后遍历写入图片的src。

接下来是确认发布的点击事件，把获得的商品信息和img数组一起传给后端。

java:

/**
     *@Author:  on 2020/3/20 14:23
     *增加商品
     *@return
     */
    @PostMapping("/addShop")
    public JSONObject addShop(Shop shop, String title, String type, String detail, double oldMoney, double money, HttpServletRequest request){
        JSONObject jsonObject = new JSONObject();
        String [] img = request.getParameterValues("img[]");/*接收前端传来的图片地址数组*/
        if (!CheckSession.checkSession()){
            jsonObject.put("code",0);
            return jsonObject;
        }else {             /*先将处图片外的其他信息存入商品表*/
            Integer userId = GetUserId.getUserId();
            String time = Now.getNowTime("yyyy-MM-dd HH:mm:ss");
            shop.setType(type);
            shop.setTitle(title);
            shop.setDetail(detail);
            shop.setOldMoney(oldMoney);
            shop.setMoney(money);
            shop.setSeller(userId);
            shop.setTime(time);
            shopRepositories.save(shop);
            Integer shopId = shopRepositories.findByTime(time).getId();/*再取出添加成功后的商品id*/
            if (img==null||img.length<1) {/*判断用户是否给商品上传了图片,没有的话封面设置为默认封面图片*/
                shopRepositories.changCover(shopId,"/userImages/shop/shop.jpg");
            } else {/*有上传图片的话把第一张设置为封面,并把图片数组存入图片表中，并标记商品的id*/
                shopRepositories.changCover(shopId,img[0]);
                for (int i=0;i<img.length;i++){
                    ShopImg shopImg = new ShopImg();
//                    System.out.println(img[i]);
                    shopImg.setAddress(img[i]);
                    shopImg.setShopId(shopId);
                    shopImgRepositories.save(shopImg);
                }
            }
            jsonObject.put("code",1);
            jsonObject.put("shopId",shopId);
            return jsonObject;
        }
    }

如果用户没有给商品上传图片，则存储一个默认的封面图，如果用户上传了图片，就把第一张作为封面图，以便在展示时调用图片。剩下的存入图片表，详情页查询使用。