一、多图上传

在商品详情等场景，经常会遇到封面图片，详情图片，而详情图片需要多张图片，虽然也可以一张一张的上传，但是，一次上传多张图片，还是能大量减轻工作量；

（一）HTML

<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/static/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/style.css" />
    <!--/meta 作为公共模版分离出去-->
    <title>添加图片 - 图片管理 - H-ui.admin v3.0</title>
    <style>
        img {
            width: 120px;
        }
    </style>
    <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<button type="button" class="layui-btn" id="up">
    @csrf
    <i class="layui-icon">&#xe67c;</i>上传图片
</button>
<div id="upimg">缩略图</div>
</body>
</html>

(二)JS

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/static/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/layui/layui.all.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript">
        layui.use('upload', function(){
            var $ = layui.jquery;
            var upload = layui.upload;
            var total = '';
            upload.render({
                elem: '#up'
                ,url: '/test/save_upload'
                ,accept: 'file' //普通文件
                ,acceptMime: 'image/jpg, image/png'
                ,multiple:true
                ,data: {
                    _token: function(){
                        return $('input[name="_token"]').val();
                    }
                }
                ,allDone: function(obj){ //当文件全部被提交后，才触发
                    layer.alert('上传文件总数：'+obj.total+'<br>'+'成功上传文件总数：'+obj.successful+'<br>'+'上传文件失败总数：'+obj.aborted);
                }
                ,done: function(res){
                    if(res.code == 0){
                        var imgs = res.url + ',';
                        var newimgs = imgs.substring(0,imgs.length-1);
                        var arr = newimgs.split(',');
                        var xhnr = '';
                        for (var i = 0;i<arr.length;i++){
                            xhnr += '<img src="'+arr[i]+'" alt="">'+'&nbsp;&nbsp;';
                        }
                        $('#upimg').append(xhnr);
                    }
                }
            });
        })
</script>

(三)接口文件

这个服务器端处理代码，根据各人需要求不同而不同，这里不再详述；

二、平坑儿

1、上传成功回调

由于多图上传时，是分开调用接口，也就是说，有几张图片，就需要调用几次接口文件，接口就返回几次信息，因此简单去接收，容易出问题，所以需要把上传几张图片返回的信息统一保存到一个数组中，这个地方需要特点注意；

2、存到一个文件中，结果这个文件类型是字符串

这个问题确实没有想到，明明定义了一个空数组，然后在空数组中添加元素，可是添加元素后却变成了字符串。没有办法，那就只能再把字符串变成数组了。

3、字符串变成数组，结果这个文件类型又变成了对象

不过这个算是虚惊一场吧，JS中数组就是对象；

var newimgs = imgs.substring(0,imgs.length-1);
var arr = newimgs.split(‘,’);
下边这行代码是用“，”来分割字符串，可是上边那句代码知道什么意思吗，是要去掉字符串最后一个符号，为什么？好好想想吧，如果想不通，那就只能先照抄了。

4、图片预览

如果是一张图片，那直接把后台反馈的信息接收，把拿到的url赋值给img的src属性就可以，但是由于每次上传图片数量不确定，所以html文档结构也就不确定，所以需要动态添加html页面元素，这就带来一定的难度，具体思路是：
for循环赋值给img的src属性，用一个数组接收，然后添加页面元素；

 var xhnr = '';
                            for (var i = 0;i<arr.length;i++){
                                xhnr += '<img src="'+arr[i]+'" alt="">'+'&nbsp;&nbsp;';
                            }
                            $('#upimg').append(xhnr);

20200224-多图上传平坑记