layui上传图片和富文本

        body部分  （图片 和 富文本）              

            

                
商品封面
                

                    

                        

                            

                                上传封面
                                

                                    
                                    

                                
                            
                        
                    
                
                
(注：图片尺寸请不要大于1024KB)
                
商品详情
                

                    

                        

                            

                        
                    
                
            

 上传图片

        传给后端的字段是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('上传失败 重试');
                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)