关于layui的一些故事（二）：文件上传

一、普通form表单上传图片

通过ajax上传图片到图床，以下实例为七牛云

<form id="formLogoID1" method="post" enctype="multipart/form-data" style="display: none;">
    <input name="token" type="hidden" value="" id="shopTokenId" class="tokenClass" />
    <input id="imagefile1" name="file" type="file" class="userfileClass" />
</form>
<label class="uploadImageClass" for="imagefile1">
    <img class="layui-upload-img upload-default-img" src="./images/photo.png" id="shopLogoImageID1">
</label>

var uploadUrl1 = '';
$("#imagefile1").live("change", function() {
    if (this.files.length != 0) {
        var imgSize = (this.files[0].size / 1024 / 1024)
        console.log(imgSize)
        if (imgSize <= 3) {
            ImageHandle1($("#shopLogoImageID1"), $("#formLogoID1").attr("id"));
        } else {
            layer.msg("图片大小超过3M，请重新选择", {
                icon: 5
            });
        }
    }
});
/**图片上传*/
function ImageHandle1(imgUrl, formID) {
    var id = new FormData(document.getElementById(formID));
    console.log(id)
    $.ajax({
        url: 'http://up.qiniu.com/',
        type: 'POST',
        data: id,
        processData: false,
        contentType: false,
        success: function(res) {
            console.log(res)
            console.log("成功：" + JSON.stringify(res));
            var srcUrl = domain + res.key;
            console.log(srcUrl)
            uploadUrl1 = srcUrl
            imgUrl.attr("src", srcUrl);
            imgUrl.css("width", "100%");
            imgUrl.css("height", "100%");
            console.log(uploadUrl1)
        },
        error: function(res) {
            console.log("失败:" + JSON.stringify(res));
        }
    });
    return false;
}

二、layui和七牛云

七牛云不支持批量上传图片，但是可以根据layui图片上传组件的异步功能，实现批量上传，但是图片上传是异步上传，当图片大小有过大差距的时候，存在图片上传顺序错乱的情况，可以在done()中根据index进行排序，然后在allDone()一起提交

<!-- 上传组件是在form表单里的-->
<div class="layui-form-item">
    <label class="layui-form-label upload goods-desc" id="details"> 商品详情图：<span class="tips">不超过3M，格式为jpg，png</span></label>
    <div class="layui-upload" style="height:auto">
        <button type="button" class="layui-btn" id="ImageDetails">上传图片</button>
        <div class="layui-upload-list multipleDetail showDetailsImg">
        </div>
    </div>
</div>

var DetailImg = new Array();
layui.use(['form', 'upload'], function() {
    var form = layui.form;
    var $ = layui.jquery;
    var upload = layui.upload;
    /*商品详情图片上传*/
    var ImageDetails = upload.render({
        elem: '#ImageDetails', //绑定元素
        size: 3072,
        multiple: true,
        number: 30,
        acceptMime: 'image/*',
        url: 'http://up.qiniu.com', //该处为七牛云的上传接口
        method: 'post',
        data: {//主要是通过后台请求七牛云的url，获取token
            key: function() {//自定义文件名
                return 'aaa.png'
            }, 
            token: function() {
                var token;
                $.ajax({
                    async: false, //ajax 非异步获取taken
                    type: 'post',
                    url: url + 'type=third&method=qiniutoken&time=3600&space=images',//后台接口
                    success: function(res) {
                        if (DetailImg.length == 30) {
                            layer.msg('最多只能上传30张', {
                                icon: 5
                            });
                        } else {
                            console.log(res)
                            token = JSON.parse(res).token;
                        }
                    }
                });
                return token;
            }
        },
        before: function(obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result) {
                // console.log(file) //{name: "1.jpg" size: 140000}
                // console.log(result) //{data:image/jpeg;base64,}
                if (DetailImg.length == 30) {
                    layer.msg('最多只能上传30张', {
                        icon: 5
                    });
                } else {
                    let imgList = `
<div class="img-box">
<img class="layui-upload-img upload-default-img" src="${result}" alt="${file.name}">
<div class="mb"></div>
<div class="remove">+</div>
</div>`
                    $('.showDetailsImg').append(imgList)
                }
            });
        },
        done: function(res, index, upload) {
            console.log(res);
            if (DetailImg.length == 30) {
                layer.msg('最多只能上传30张', {
                    icon: 5
                });
            } else {//由于图片上传是异步上传，所以存在图片上传顺序错乱的情况，可以根据index，进行重新排序
                var index = index.split('-')[1]
                console.log(index)
                if (index == 0) {
                    sortArr = new Array();
                }
                var url = domain + res.key
                sortArr.push({
                    index: index,
                    url: url
                })
                console.log(sortArr)
            }
        },
        allDone: function(obj) { //当文件全部被提交后，才触发
            console.log(obj);
            if (sortArr.length > 1) {
                sortArr.sort(compare)
                for (var i = 0; i < sortArr.length; i++) {
                    DetailImg.push(sortArr[i].url)
                }
            } else {
                DetailImg.push(sortArr[0].url)
            }
            console.log(DetailImg)
        },
        error: function() {
            //演示失败状态，并实现重传
            // return layer.msg('error');
            return;
        }
    });
 })
/*
 *  详情图 图片删除
 */
$(".showDetailsImg").on('mouseenter mouseleave', '.img-box', function() {
    $(this).find(".remove").css({
        opacity: 0.5
    })
    $(this).find(".mb").css({
        opacity: 1
    })
})
$(".showDetailsImg").on('mouseleave', '.img-box', function() {
    $(this).find(".remove").css({
        opacity: 0
    })
    $(this).find(".mb").css({
        opacity: 0
    })
})
$(".showDetailsImg").on('click', '.remove', function() {
    var parents = $(this).parent()[0]
    var index = $(".showDetailsImg .img-box").index(parents);
    console.log(index);
    console.log(DetailImg)
    DetailImg.splice(index, 1)
    console.log(DetailImg)
    $(this).parent().remove()
})
/*排序*/
function compare(obj1, obj2) {
    var a = obj1.index;
    var b = obj2.index;
    return a - b;
}

三、动态渲染数据表格时，添加图片上传组件

先上图片

重点：在渲染数据表格的时候，需要一起把上传按钮的点击事件一起渲染

<div class="layui-form-item ">
    <label class="layui-form-label goods-desc">商品规格：</label>
    <div class="specs">
        <div class="box">
            <div class="layui-input-block" style="margin-left: 15px;display: flex;">
                <input type="text" name="network" autocomplete="off" placeholder="网络" class="layui-input" id="network" style="width: 50px;margin-right: 20px;">
                <input type="text" name="newNetwork" autocomplete="off" class="layui-input" id="newNetwork" style="width: 150px;margin-right: 20px;">
                <button type="button" class="layui-btn layui-btn-primary" style="width: 50px;padding: 0;" id="addNewNetwork">新增</button>
            </div>
            <div class="showAddNewNetwork showAdd"></div>
        </div>
        <div class="box">
            <div class="layui-input-block" style="margin-left: 15px;display: flex;">
                <input type="text" name="memory" autocomplete="off" placeholder="内存" class="layui-input" id="memory" style="width: 50px;margin-right: 20px;">
                <input type="text" name="newMemory" autocomplete="off" class="layui-input" id="newMemory" style="width: 150px;margin-right: 20px;">
                <button type="button" class="layui-btn layui-btn-primary" style="width: 50px;padding: 0;" id="addNewMemory">新增</button>
            </div>
            <div class="showAddNewMemory showAdd"></div>
        </div>
        <div class="box">
            <div class="layui-input-block" style="margin-left: 15px;display: flex;">
                <input type="text" name="color" autocomplete="off" placeholder="颜色" class="layui-input" id="color" style="width: 50px;margin-right: 20px;">
                <input type="text" name="newColor" autocomplete="off" class="layui-input" id="newColor" style="width: 150px;margin-right: 20px;">
                <button type="button" class="layui-btn layui-btn-primary" style="width: 50px;padding: 0;" id="addNewColor">新增</button>
            </div>
            <div class="showAddNewColor showAdd"></div>
        </div>
        <button type="button" class="layui-btn" id="save">保存</button>
    </div>

</div>

<script type="text/html" id="showGoodsList">
    <table>
        <thead>
            <tr>
                <th>{{d.title1}}</th>
                <th>{{d.title2}}</th>
                <th>{{d.title3}}</th>
                <th>售价</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            {{# layui.each(d.data, function(index, item){ }}
            <tr>
                <td>{{item.network}}</td>
                <td>{{item.memory}}</td>
                <td class="picBox">
                    <div class="color">
                        {{item.color}}
                    </div>
                    <div class="layui-upload addUpload">
                        <button type="button" class="layui-btn eachGoodsImgBtn" style="float: left;  margin: 35px 10px 0 0">上传图片</button>
                        <input class="layui-upload-file" type="file" accept="image/*" name="file">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img ShowEachGoodsImg">
                        </div>
                    </div>
                </td>
                <td class="eachPrice">
                    <input type="text" autocomplete="off" class="layui-input" placeholder="999">
                </td>
                <td class="eachStock">
                    <input type="text" autocomplete="off" class="layui-input" placeholder="999">
                </td>
            </tr>
            {{# }); }}
        </tbody>
    </table>
<script>

var network = '';
var networkArr = new Array();
var memory = '';
var memoryArr = new Array();
var color = '';
var colorArr = new Array();
var goodsList = '';
var trIndex = '';
layui.use(['form', 'upload', 'laytpl'], function() {
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    var upload = layui.upload;
    var laytpl = layui.laytpl;
    //按钮保存生成规格表格
    $("#save").click(function() {
        var newArr = new Array();
        if (network == '') {
            network = "网络"
        }
        if (memory == '') {
            memory = "内存"
        }
        if (color == '') {
            color = "颜色"
        }
        if (networkArr == '' || memoryArr == '' || colorArr == '' || network == '' || memory == '' || color == '') {
            layer.msg("请先添加内容，再保存", {
                icon: 5
            });
        } else {
            for (var i = 0; i < networkArr.length; i++) {
                for (var j = 0; j < memoryArr.length; j++) {
                    for (var k = 0; k < colorArr.length; k++) {
                        newArr.push({
                            network: networkArr[i],
                            memory: memoryArr[j],
                            color: colorArr[k],
                            imgurl: '',
                            price: '',
                            stock: ''
                        })
                    }
                }
            }
            console.log(newArr)
            goodsList = {
                title1: network,
                title2: memory,
                title3: color,
                data: newArr
            }
            console.log(goodsList)
            var getTpl = showGoodsList.innerHTML;
            var view = document.getElementById('goodslist');
            laytpl(getTpl).render(goodsList, function(html) {
                view.innerHTML = html;
            });
            //重点:在渲染表格的时候，需要渲染upload组件，否则按钮的点击事件是无效的
            uploadImgRender(".eachGoodsImgBtn");
        }
    })

    //获取tr的索引 
    $("#goodslist").on("click", ".eachGoodsImgBtn", function() {
        var gettr = $(this).parent().parent().parent()[0];
        trIndex = $("#goodslist tbody tr").index(gettr);
        console.log(gettr)
        console.log(trIndex)
    })

    /*封装表格里单个图片上传*/
    function uploadImgRender(e) {
        var uploadEachGoods = upload.render({
            elem: e, //绑定元素
            size: 3072,
            acceptMime: 'image/*',
            url: 'http://up.qiniu.com/', //上传接口
            method: 'post',
            data: {
                key: function() {//自定义文件名
                    return 'aaa.png'
                }, 
                token: function() {
                    var token;
                    $.ajax({
                        async: false, //ajax 非异步获取taken
                        type: 'post',
                        url: url + 'type=third&method=qiniutoken&time=3600&space=images',
                        success: function(res) {
                            console.log(res)
                            token = JSON.parse(res).token;
                        }
                    });
                    return token;
                }
            },
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $("#goodslist tbody tr").eq(trIndex).find(".layui-upload-list").css({
                        'display': 'block'
                    })
                    $("#goodslist tbody tr").eq(trIndex).find(".ShowEachGoodsImg").attr('src', result)
                });
            },
            done: function(res, index, upload) {
                console.log(res);
                for (var i = 0; i < goodsList.data.length; i++) {
                    if (i == trIndex) {
                        goodsList.data[i].imgurl = domain + res.key; //damain 来自qiniu/formdata.js
                    }
                }
                console.log(goodsList)
            },
            error: function() {
                //演示失败状态，并实现重传
                return layer.msg('error');
            }
        });
    }
})

三、layui 图片上传时，判断图片长宽和自定义名字

layui再上传图片时，若是需要判断上传图片的长宽，可以在上传前继续判断，选择choose: function(obj){}，同时要关闭自动上传，即auto: false，批量上传图片时，图片渲染要放在choose中

<!-- 上传图片-->
<div class="layui-form-item">
    <label class="layui-form-label upload goods-desc"> 小程序logo：</label>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="appletsImg">上传图片</button>
        <label style="width: 500px;color: red;margin-left: 20px;">注：小程序logo图标，格式必须为：png，jpeg，jpg，建议上传像素为180*180，图片最大为256KB</label>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="ShowThirdImg">
        </div>
    </div>
</div>

var suffix=""; //获取上传图片的后缀名
var img="";//需要获取的图片

// 图片尺寸
var imgSize = {
    width: 180,
    height: 180,
    size: 256
};
//方法调用
uploadImgRender("#appletsImg", "#ShowThirdImg", imgSize, function(res) {
    img = res
});
// 封装图片上传功能
function uploadImgRender(elemBtn, showImg, size, callback) {
    var ImageSingular = upload.render({
        elem: elemBtn, //绑定元素
        size: size.size,
        acceptMime: 'image/jpg, image/jpeg, image/png',
        url: 'http://up.qiniu.com/', //上传接口
        method: 'post',
        auto: false, //要在choose中判断上传图片大小时，auto参数必须设置为false
        data: {
            key: function() { //自定义文件名
                return getNowFormatDate() + lastThree() + "." + suffix
            },
            token: function() {
                var token;
                $.ajax({
                    async: false, //ajax 非异步获取taken
                    type: 'post',
                    url: url + 'type=third&method=qiniutoken&time=3600&space=images',//后台接口
                    success: function(res) {
                        console.log(res)
                        token = JSON.parse(res).token;
                    }
                });
                return token;
            }
        },
        choose: function(obj) { //上传前选择回调方法
            // var files = obj.pushFile();//将每次选择的文件追加到文件队列
            var flag = true;
            obj.preview(function(index, file, result) {//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
                //这里还可以做一些 append 文件列表 DOM 的操作
                // obj.upload(index, file); //满足条件调用上传方法
                //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                console.log(file)
                suffix = file.name.split('.')[1];//获取上传图片的后缀名
                var img = new Image();
                img.src = result;
                img.onload = function(res) { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                    if (size.width == 0 && size.height == 0) {
                        obj.upload(index, file); //满足条件调用上传方法
                    } else if (size.width != 0 && size.height != 0) {
                        if (img.width == size.width && img.height == size.height) {
                            obj.upload(index, file); //满足条件调用上传方法
                        } else {
                            flag = false;
                            layer.msg(`您上传的小图大小必须是${size.width}*${size.height}尺寸！`);
                            return false;
                        }
                    }
                }
                return flag;
            });
        },
        before: function(obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result) {
                //多张图片上传时，应该放在choose中
                $(showImg).attr('src', result); //图片链接（base64）
            });
        },
        done: function(res, index, upload) {
            console.log(res);
            var saveImg = domain + res.key; //damain 来自qiniu/formdata.js
            console.log(saveImg)
            callback(saveImg);
        },
        error: function() {
            //演示失败状态，并实现重传
            return layer.msg('error');
        }
    });
}

//生成图片的随机数
function getNowFormatDate() {
    var day = new Date();
    var Year = 0;
    var Month = 0;
    var Day = 0;
    var Hour = 0;
    var Minute = 0;
    var Second = 0;
    var CurrentDate = "";
    Year = day.getFullYear(); //支持IE和火狐浏览器.
    Month = day.getMonth() + 1;
    Day = day.getDate();
    Hour = day.getHours();
    Minute = day.getMinutes();
    Second = day.getSeconds();
    CurrentDate += Year; //CurrentDate =CurrentDate+ Year
    if (Month >= 10) {
        CurrentDate += Month;
    } else {
        CurrentDate += "0" + Month;
    }
    if (Day >= 10) {
        CurrentDate += Day
    } else {
        CurrentDate += "0" + Day;
    }
    CurrentDate = CurrentDate + Hour + Minute + Second;
    return CurrentDate;
}

function lastThree() {
    var lastThree = '';
    for (var i = 0; i < 3; i++) {
        lastThree += Math.floor(Math.random() * 10);
    }
    return lastThree
}

四、layui 图片上传

1.选择文件的回调

在文件被选择后触发，该回调会在 before 回调之前。一般用于非自动上传（即 auto: false ）的场景，比如预览图片等。

upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,auto: false //选择文件后不自动上传
  ,bindAction: '#testListAction' //指向一个按钮触发上传
  ,choose: function(obj){
    //将每次选择的文件追加到文件队列
    var files = obj.pushFile();

    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
    obj.preview(function(index, file, result){
      console.log(index); //得到文件索引
      console.log(file); //得到文件对象
      console.log(result); //得到文件base64编码，比如图片

      //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

      //这里还可以做一些 append 文件列表 DOM 的操作

      //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
      //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
    });
  }
});      

2.文件上传前的回调

在 choose 回调之后、done/error 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。

upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
    layer.load(); //上传loading
  }
  ,done: function(res, index, upload){
    layer.closeAll('loading'); //关闭loading
  }
  ,error: function(index, upload){
    layer.closeAll('loading'); //关闭loading
  }
});      

3.上传接口请求成功的回调

在上传接口请求完毕后触发，但文件不一定是上传成功的，只是接口的响应状态正常（200）。回调返回三个参数，分别为：服务端响应信息、当前文件的索引、重新上传的方法

upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,done: function(res, index, upload){
    //假设code=0代表上传成功
    if(res.code == 0){
      //do something （比如将res返回的图片链接保存到表单的隐藏域）
    }

    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
    var item = this.item;

    //文件保存失败
    //do something
  }
});      

4.上传请求失败的回调

当请求上传时出现异常时触发（如网络异常、404/500等）。回调返回两个参数，分别为：当前文件的索引、重新上传的方法

upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,error: function(index, upload){
    //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
  }
});

5.多文件上传完毕后的状态回调

只有当开启多文件时（即 multiple: true），该回调才会被触发。回调返回一个 object 类型的参数，包含一些状态数据：

upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,multiple: true
  ,allDone: function(obj){ //当文件全部被提交后，才触发
    console.log(obj.total); //得到总文件数
    console.log(obj.successful); //请求成功的文件数
    console.log(obj.aborted); //请求失败的文件数
  }
  ,done: function(res, index, upload){ //每个文件提交一次触发一次。详见“请求成功的回调”

  }
});   

6.文件上传进度的回调

在网速一般的情况下，大文件的上传通常需要一定时间的等待，而浏览器并不会醒目地告知你它正在努力地上传中，此时为了提升用户体验，我们可以通过该回调制作一个进度条。

upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,progress: function(n, elem){
    var percent = n + '%' //获取进度百分比
    element.progress('demo', percent); //可配合 layui 进度条元素使用

    //以下系 layui 2.5.6 新增
    console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
  }
});