Guns二次开发（十三）：自定义图片上传插件

    关于博客中使用的Guns版本问题请先阅读   Guns二次开发目录   

       

       之前写过一篇替换 Guns 自带的图片上传后端接口的文章，当时测试的，也只是上传头像的功能，随着开发的不断深入，业务需求也越来越复杂，当做当商品管理的时候，发现 Guns 自带的图片上传插件并不能满足当前的业务需求，所以我自己写了一个js插件，方便后期的使用。

 

1、图片上传的效果图

 

 

2、需要引入的文件

要使用这个图片上传接口，需要引入三个文件：

（1）img-upload.css    （2）FileUpload.js    （3）image.tag  

 

首先是上传图片的页面，引入 css文件和js文件 ：

 

同时，还要在这个页面中，引入这段代码： <#image title="品牌Logo图片*：" id="logoUrl"/>

 

这个#imgage 是我自定义的tag标签，我把他和原来guns自定义的tag标签放在了一起：

 

 

 

image.tag 的实现逻辑也很简单，里面有详细的注释，直接看就可以。

 

走到这里，图片上传的基本功能就已经实现了，此时还有一个需要注意的，我们上传的图片是保存到一个input隐藏标签中的，我们在最后收集请求参数的时候，如何获取这个字段的图片呢，因为我们引入 tag便签的时候，设置的id是 “logoUrl ”:

<#image title="品牌Logo图片*：" id="logoUrl"/> 

所以，最后图片上传成功之后，URL其实是保存到 id 为 logoUrl 的标签中，如下图：

这一点，在前端html页面中也有所体现：

 

 

所以，获取的时候，只需要一行代码就能获取到当前图片的URL：

 var logoUrl = $("#logoUrl").val(); 

 

3、编辑时图片的回显

前面展示的都是第一次添加时的使用方式，但是修改的时候，我们的逻辑是先回显之前添加的数据，此时就涉及到图片回显，此时既要显示之前的图片，又要实现修改图片的功能。

 

实现点击旧图的时候，更换新的图片：

 

具体的代码体现就是，在 <#image> 标签中添加一个属性【src】,并将后端返回的图片URL赋值给这个属性，其它都不需要改变，如下图：

 

image.tag 文件中的具体实现逻辑就是下面这行代码：

 

 

4、一个字段有多张图片

有的时候，可能会出现这种情况，比如商品副图，一个商品可能有多个副图，而这些副图都是保存到一个字段中的，如下图：

 

前端beetl模板中这段代码的实现方式是：

   

            @for(var i=1 ;i<6;i++){
                <#image id="subImage_${i}" imgNames="subImages"/>
            @}
 

 

image.tag 标签中对 imgNames的处理方式如下，可以发现，这个给多个标签设置相同的名字：

 

主要为了方便于后面获取这个字段中的所有图片时使用：

 

在修改时对于多张图片的商品回显，可以参考下面这段代码：

 

 

5、源码分享

（1）img-upload.css 

 

.show_detail img{
    width: 100px;
    height: 100px;
}

/*属性图*/
.content{
    display: flex;
}
.box{
    display: flex;
    width: 600px;
    flex-wrap: wrap;
}
.img_box{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    position: relative;
}
.add_img{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
    top: 0;
    color: #999;
    display: flex;
    flex-flow: column;
    justify-content: center;
    cursor: pointer;
}
#file_a,#file_b,#file_c,#file_d,#file_e{
    display: none;
}
.file_box{text-align: center;margin-left: 20px;margin-bottom: 10px;}
/* 文件 */
.file-item{position: relative;margin-right: 15px;}
.file-item .info {
    position: absolute;
    bottom: 0;
    height: 20px;
    line-height: 20px;
    text-indent: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    z-index: 10;
}
.file-item .error {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    background: red;
    color: white;
    text-align: center;
    height: 20px;
    font-size: 14px;
    line-height: 23px;
}
.thumbnail{padding: 0;}
.remove-this{
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 12px;
    z-index: 10;
    border-radius: 10px;
    cursor: pointer;
}

 

（2）FileUpload.js   

var FileUpload = {

    
}


/**
 * ajax 图片上传工具
 * @param id 上传图片的id，图片上传成功之后获取图片的URL时需要
 */
FileUpload.ajaxUploadImage=function (id) {

    $("#"+id+"_upload_img").click().unbind('change').on('change',function(event){

        var filepath  = $(this).val();
        var fileType = filepath.substring(filepath.lastIndexOf(".")).toLowerCase();
        var fileTypes = [".jpg", ".gif", ".jpeg", ".png"];//允许上传的图片类型
        if(fileTypes.indexOf(fileType)==-1){
            Feng.error("请选择后缀为【"+fileTypes.toString()+"】类型的图片文件");
            return false;
        }

        var imgFile = event.target.files[0];
        var fileSize = imgFile.size;
        if(fileSize>1*1024*1024){
            Feng.error("请上传小于1M的图片");
            return false;
        }

        var srcUrl = window.URL.createObjectURL(imgFile);
        $("#"+id+"_upload_detail").empty().append("");

        var formData = new FormData();
        formData.append("file",imgFile)
        $.ajax({
            url:Feng.ctxPath + '/mgr/upload',
            type:"POST",
            data:formData,
            processData : false,
            contentType : false,
            dataType : 'json',
            async : false,
            success : function (res) {

                //将图片的URL保存到隐藏的input标签中临时保存
                $("#"+id).val(res);
                
            },
            error: function(err) {
                Feng.error(JSON.stringify(err));
            }
        });

        if($(event.target).siblings(".show_detail").children().length>1){
            $(event.target).siblings(".show_detail").children().eq(0).remove();
        }

    });


}

 

（3）image.tag 

@/*
    表单中input框标签中各个参数的说明:

    title : 图片标题,再图片左侧
    id : 图片上传框的id,上传图片时调用接口时用到;同时也是保存图片url的input隐藏框的id，用户获取图片的URL时使用
    src : 图片的URL，编辑界面时用于回显添加时上传的图片
    imgNames: input隐藏标签的name字段的值，用于多图上传时，获取一个字段多张图片时使用
    topTitle: 图片标题，在图片头顶

@*/


    @if(isNotEmpty(title)){
        ${title}
        

    @}

        

            @if(isNotEmpty(topTitle)){
                
${topTitle}
            @}

            

                
                

                    @if(isNotEmpty(src)){
                        
                    @}else{
                        
+
                        
点击添加
                    @}

                
            

            
        

        @if(isNotEmpty(title)){
            
        @}

@if(isNotEmpty(underline) && underline == 'true'){
    

@}

 

（4）CommonTool.js

var CommonTool={}

/**
 * 判断是字符串是否为null，'undifined',空串，空格 如果是，返回true；
 * 判断对象是否为空，如果为空对象或集合，返回true
 *
 * @param value
 * @returns {boolean}
 */
CommonTool.isEmpty=function (value) {

    //判断是否是undefined和""
    if(!value){
        return true;
    }

    //如果是字符串，还要去掉首尾空格后判断长度是否为0
    if(typeof(value) == 'string' && value.trim().length==0){
        return true;
    }


    //如果是对象
    if(typeof(value) == 'object' || JSON.stringify(value) === '{}'){
        return true;
    }
    return false;

}

 

至此，分享结束！

 

该系列更多文章请前往 Guns二次开发目录