layui中实现上传多张图片

1.首先页面上要引入layui.css和layui.js

<link rel="stylesheet" href="../layui-v2.7.6//layui/css/layui.css">

<script src="../layui-v2.7.6/layui/layui.js"></script>

2.在html中引入上传图片的组件

 <div class="layui-upload">
     <blockquote class="layui-elem-quote layui-quote-nm" style="height: 60px;background-color: transparent;padding: 0px;border: none;margin: 0px;display: flex;align-items: center;">
          <div class="layui-upload-list" id="demo1" ></div>
          <button type="button" class="layui-btn" id="test1">+</button> 
      </blockquote>
 </div>

3.在js中写入

layui.use(["upload", "element",'jquery'],function(){
    var $ = layui.jquery,
    upload = layui.upload,
    element = layui.element,
   //   头像上传
     upload.render({
        elem: '#test1'
        ,url: 'https://httpbin.org/post' //此处配置你自己的上传接口即可
        ,multiple: true
        ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#demo1').append(`<div class="list">
            <span>+</span>
            <img src="${result}" alt="${file.name}" class="layui-upload-img">
        </div>`)
          });
        }
        ,done: function(res){
          //上传完毕
        }
      });
     
}}

4.实现效果