layui多张图片上传最多9张（新增和修改时的显示问题）

layui多张图片上传最多9张（新增和修改时的显示问题）

 

html:

    多图片上传      //如果图片数组大于9张，则不显示button.   此处v-show不可以改为v-if,否则再次显示时，button没有触发事件
    

        

              //遍历数组 ，span的id为数组的索引，方便下面的删除
                  //显示遍历的图片
                   //删除图片，将数组的索引传过去
                    
                
            
        
    



js:

layui.use('upload', function() {
    var $ = layui.jquery
        , upload = layui.upload;

    //多图片上传
    upload.render({
        elem: '#test2'
        ,url: getWebPath() + 'api/fileUploads'
        ,multiple: true
        // ,before: function(obj){
        //     //预读本地文件示例，不支持ie8
        //     obj.preview(function(index, file, result){
        //     });
        // }
        ,done: function(res){
            if(parseInt(vm.imgList.length) < 9){
                vm.imgList.push(res.object[0]);   //少于9张图片，将上传图片加入数组
            }
        }
    });

});

function deleteConfirmationImg(index) {
    vm.imgList.splice(index,1);   //删除图片数组中的图片
}


效果图：

 

posted @ 2018-07-20 14:33 wangbiubiu 阅读( ...) 评论( ...) 编辑 收藏