使用layui框架完成多图片上传以及layui的富文本功能

1.更多详细资料可查看layui的官网文档：https://www.layui.com/doc/

2. layui的富文本

2.1 遇到的问题

1）当我在form表单中嵌入layui框架的富文本的时候，想将用户填写在表当上的文本一起随其他input内容提交到后台，发现取不到layui富文本框下的文本

2.2 注意点

• 要查看官方文档查看富文本的创建的顺序，比如在富文本中的图片上传的配置要在初始化富文本之前
• 对于要在函数体外使用到的变量，可以使用全局创建的方法，比如：var index, layedit, layer;

2.3 主要逻辑

1.引入layui库相关的css以及js文件
2.初始化配置好富文本
3.使用var content = layedit.getText(index)获取用户填入的富文本文本
4.使用layui的form.on来监听表单的提交，在提交表时使用的时$.ajax()技术

• 其中使用的是创建FormData()对象的形式，将数据append到FormData()对象中，再传给后台

var formData = new FormData();
var content = layedit.getText(index)
formData.append('content', content);

• 可以通过监听”取消发布“的按钮将富文本的内容清除

  $('.reset-btn').click(function () {
    
    
        layedit.setContent(index, '')
    })

2.1 实现效果如下

3. layui实现多张图片上传

3.1 需求

1.上传多张图片
2.点击图片的时候进行删除
3.点击了”上传“按钮之后，上传每一张照片的同时向后台发送请求，后台返回图片的地址
4.前台将每一张图片的地址缓存再input标签中，多张图片的地址以逗号隔开，使得每次点击提交表单按钮的时候，后台直接获取input标签中的地址.val()

3.2 逻辑

• 使用layui上传文件的模块upload.render({})，相关的配置项可以查看官方文档：https://www.layui.com/doc/modules/upload.html
• 这里主要说明执行上传操作时的回调函数
  1）before:文件提交上传前的回调，返回一个object参数。一般用于上传完毕前的loading，或者图片预览。在此可以使得在预读图片的时候，动态创建img。$('#multiple_img_upload').before('<img>')即每次都在”上传“按钮元素的前面添加img

//参数说明：
//index：文件的索引（包括图片）
//file：文件对象
//result：得到文件base64编码，比如图片
   before: function (obj) {
    
    
                obj.preview(function (index, file, result) {
    
    
                    $('#multiple_img_upload').before('<img src="' + result + '" alt="' + file.name + '" title="点击删除" class="layui-upload-img" style="width: 160px;height: 140px;margin-right:18px;border:1px dashed darkgray;vertical-align:top;margin-bottom:10px;" οnclick="delMultipleImgs(this)">&nbsp;')
                });
            },

2）done：执行上传请求后的回调，返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、丿；upload（重新上传的方法，一般在文件上传失败后使用）

,done: function(res, index, upload){
    
    
    //假设code=0代表上传成功
    if(res.code == 0){
    
    
      //do something （比如将res返回的图片链接保存到表单的隐藏域）
       multiple_images.push(res.data.src);
       //multiple_images是自定义的一个数据，即当每次上传成功的时候就将图片的链接push进去，最后在赋值给input标签
       //.multiple_show_img是input标签，用于存储图片的链接
       $('.multiple_show_img').val(multiple_images);
    }
    else{
    
    
    layer.msg(res.message);
    }
  }
});

• 每次点击添加的图片都是动态创建的

3. 实现效果

3.整体代码

3.1 js文件

var multiple_images = []; //用于存储多张图片的地址
// 点击图片进行删除操作的全局函数
function delMultipleImgs(this_img) {
    
    
    var subscript = $("#div-slide_show img").index(this_img);
    this_img.remove();
    multiple_images.splice(subscript, 1);
    multiple_images.sort();
    $('.multiple_show_img').val(multiple_images);
    return;
}

$(() => {
    
    
    var index, layedit, layer;
    layui.use(['form', 'layedit', 'upload'], function () {
    
    
        layedit = layui.layedit,
            form = layui.form,
            upload = layui.upload;
        layedit.set({
    
    
            uploadImage: {
    
    
                url: 'xxx',//上传图片的接口
                type: 'post',
                dataType: 'json',
                success: function (res) {
    
    
                    console.log(res.code)
                }
            }
        });
        upload.render({
    
    
            elem: '#multiple_img_upload',
            url: "xxxx",//上传图片的接口
            multiple: true,
            before: function (obj) {
    
    
                obj.preview(function (index, file, result) {
    
    
                    $('#multiple_img_upload').before('<img src="' + result + '" alt="' + file.name + '" title="点击删除" class="layui-upload-img" style="width: 160px;height: 140px;margin-right:18px;border:1px dashed darkgray;vertical-align:top;margin-bottom:10px;" οnclick="delMultipleImgs(this)">&nbsp;')
                });
            },
            done: function (res) {
    
    
                if (res.code == 0) {
    
    
                    multiple_images.push(res.data.src);
                    $('.multiple_show_img').val(multiple_images);
                    // console.log($('.multiple_show_img').val());
                } else {
    
    
                    layer.msg(res.message);
                }
            }
        });
        //初始化富文本
        index = layedit.build('details', {
    
    
            tool: ["strong", "italic", "underline", "del", "|", "left", "center", "right", "|", "link", "image", "code"],
        });
        form.verify({
    
    
            content: function (value) {
    
    
                layedit.sync(index);
            }
        })
        form.on('submit(form)', function (data) {
    
    
            var title = $("input[name='title']").val();
            var category_id = $("#category_id").val();
            var price = $("input[name='price']").val();
            var promotion_price = $("input[name='promotion_price']").val();
            // var cover_image = $("#cover_image")[0].files[0];
            var images = $('.multiple_show_img').val();
            var _token = $("input[name='_token']").val();
            var content = layedit.getText(index)
            var formData = new FormData();
            formData.append('_token', _token);
            formData.append('title', title);
            formData.append('category_id', category_id);
            formData.append('price', price);
            formData.append('promotion_price', promotion_price);
            formData.append('common_content', content);
            // formData.append('cover_image', cover_image);
            formData.append('images', images);
            $.ajax({
    
    
                url: 'xxxx',//填写提交表单的接口地址
                data: formData,
                contentType: false,
                processData: false,
                cache: false,
                ifModified: true,
                async: false,
                type: "post",
                dataType: "json",
                success: function (result) {
    
    
                    if (result.code == 200) {
    
    
                        layer.msg(result.message);
                        alert(data.field)
                    }
                    if (result.code == 501) {
    
    
                        layer.msg(result.message);
                    }
                },
                error: function (result) {
    
    
                    console.log(result);
                }
            });
        });


    })
    //点击取消发布时清空富文本内容
    $('.reset-btn').click(function () {
    
    
        layedit.setContent(index, '')
    })
})

3.2 php文件

 <form method="post" onsubmit="return false" action="##" id="shop_add" class="layui-form clearfix">
                                <div class="input-grounp input-grounp-left">
                                    <label for=""><span>*</span>标题：</label>
                                    <input type="text" name="title" placeholder="请输入标题" class="add-input-border">
                                </div>
                                <div class="input-grounp select-box input-grounp-left">
                                    <label for=""><span>*</span>所属分类：</label>
                                    <div class="select-option">
                                        <select name="category_id" id="category_id">
                                            @empty($categorys)
                                            @else
                                            <option value="">请选择所属分类</option>
                                            @foreach($categorys as $k=>$v)
                                            <option value="{
     
     {$k}}">{
   
   {$v}}</option>
                                            @endforeach
                                            @endempty
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" name="_token" value="{
     
     {csrf_token()}}">
                                <div class="input-grounp select-box input-grounp-left">
                                    <label for=""><span>*</span>原价：</label>
                                    <input type="number" name="price" placeholder="请输入原价" class="add-input-border">
                                </div>
                                <div class="input-grounp select-box input-grounp-left">
                                    <label for=""><span>*</span>优惠价：</label>
                                    <input type="number" name="promotion_price" placeholder="请输入优惠价" class="add-input-border">
                                </div>

                                <div class="input-grounp upload-img-group input-grounp-left">
                                    <label for="" style="white-space: nowrap;">上传封面图：</label>
                                    <div id="Pic_pass">
                                        <div class="picDiv">
                                            <div class="addImages">
                                                <input type="file" class="file" name="images" id="cover_image" accept="image/png, image/jpeg, image/gif, image/jpg">
                                                <div class="text-detail">
                                                    <span>+</span>
                                                    <p>点击上传</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="input-grounp upload-img-group picture-set" style="width: 100%;">
                                    <label for="" style="white-space: nowrap;">上传图片集：</label>
                                    <input type="hidden" name="imgs" class="multiple_show_img" value="" id="images">
                                    <div class="layui-upload ml10">
                                        <button type="button" class="layui-btn" id="multiple_img_upload"><p>+</p> 点击上传</button>
                                        <div class="layui-upload-list" id="div-slide_show"></div>
                                    </div>
                                </div>
                                <div class="input-grounp textarea-group" style="width: 1000px;">
                                    <label for=""><span>*</span>内容详情：</label>
                                    <textarea class="layui-textarea" id="details" name="details" style="display: none;" lay-verify="content"></textarea>
                                </div>

                                <div class="input-grounp btn-group">
                                    <button type="submit" class="submit-btn" lay-filter="form" id="release" lay-submit>立即发布</button>
                                    <button type="reset" class="reset-btn">取消发布</button>
                                </div>

                            </form>

主要部分：

4.最终结果