layui上传图片和富文本

        body部分  （图片 和 富文本）              

            <div class="layui-tab-item">
                <div style="width: 100%; height: 30px; font-weight: bold; border-bottom: 1px solid #f0eded; margin-bottom: 30px;">商品封面</div>
                <div class="layui-form-item" style="width:100%;">
                    <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
                        <div class="layui-card layui-col-md12">
                            <div class="layui-card-body">
                                <button type="button" class="layui-btn" id="test1">上传封面</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="color:#f50;font-weight:bold;margin-top:30px;font-size:12px;">(注：图片尺寸请不要大于1024KB)</div>
                <div style="width: 100%; height: 30px; font-weight: bold; border-bottom: 1px solid #f0eded; margin-bottom: 30px;margin-top:30px;">商品详情</div>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="editor">
                            <p id="content"></p>
                        </div>
                    </div>
                </div>
            </div>

 上传图片

        传给后端的字段是cover：imagesdate 

var imagesdate;    //在外层定义一个值用来接收

 

       //------------------------------------上传封面
            var uploadInst = upload.render({
            elem: '#test1'
            , method: 'post'
            , size: "1024"
            , msize: '1024'
            , field: 'image'
            , url: "url接口地址"//此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , headers: {
                Authorization: token
            }
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', { icon: 16, time: 0 });
            }
            , done: function (res) {
                console.log(res)
                imagesdate = res.data
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });

上传富文本

        注：除了要引用wangEditor ，还要引入lay-config.js 

        监听提交的时候 将详情字段 let content = editor.txt.html() 传给后端即可

 var editor;


// 详情富文本
        editor = new wangEditor('#editor');
        editor.customConfig.uploadImgServer = "url接口地址";
        editor.customConfig.uploadFileName = 'image';
        editor.customConfig.pasteFilterStyle = false;
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.uploadImgHooks = {
            // 上传超时
            timeout: function (xhr, editor) {
                layer.msg('上传超时！')
            },
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            customInsert: function (insertImg, result, editor) {
                console.log(result);
                if (result.code == 200) {
                    layer.msg(result.msg)
                    insertImg( baseUrl + result.data)
                } else {
                    layer.msg(result.msg);
                }
            }
        };
        editor.customConfig.customAlert = function (info) {
            layer.msg(info);
        };
        editor.create();

     

编辑图片回显 imagesdate = cover

编辑富文本回显 editor.txt.html(content)