How to upload pictures and post-processing in rich text editor of layui

Keywords: axios PHP Javascript JSON

The front page and JS are as follows:


<form class="layui-form"  action="" >

    <textarea name="tweets" id="tweets" style="display: none;"></textarea>
    <script>
        layui.use('layedit', function(){
            var layedit = layui.layedit;
            layedit.build('demo'); //Build editor
        });
    </script>

    <div class="layui-from-item" style="margin-top: 15px;padding-bottom: 200px;">
        <div class="layui-input-block">
            <button  class="layui-btn" lay-submit  lay-filter="tweets_sub" >Submission</button>
            <button type="reset" class="layui-btn-primary layui-btn">Reset</button>
        </div>
    </div>

</form>



</body>
<script type="text/javascript" src="__PLUGINS__/axios/axios.min.js"></script>
<script>
    layui.use(['layedit','form'], function(){
        var form=layui.form;
        var layedit = layui.layedit;
        var up_url="{:url('Upload/doup')}";//Upload image url

        layedit.set({
            uploadImage: {
                url:up_url //Interface url
                ,type: 'post' //Default post
            }
        });

        //Build editor
        var index=layedit.build('tweets');

        form.on('submit(tweets_sub)', function(data){

            //layer.msg(JSON.stringify(data.field));
            //Get editor value
            var tweets_content=layedit.getContent(index);
            //ajax submission processing
            axios.post("{:url('Tweets/do_add')}",{"content":tweets_content})
                .then(function(response){
                    console.log(response);
                    if(response.data.code==1){
                        layer.alert(response.data.msg,{icon:6},function () {
                            window.location.href="{:url('tweets/index')}"
                        });
                    }else{
                        layer.alert(response.data.msg,{icon:5},function(){
                            window.location.reload();
                        });
                    }

                })
                .catch(function(error){
                    console.log(error);
                });
            return false;
        });


    });
</script>

This is not the same as Baidu's Ueditor I used before. Here, you can upload pictures directly and process them

Var up ﹣ / / upload image url

layedit.set({
    uploadImage: {
        url: up uurl / / interface url
        , type: 'post' / / default post
    }
});

The processing interface PHP file is as follows

<?php
/**
 * Created by PhpStorm.
 * User: martinby
 * Date: 2018/3/5
 * Time: 23:25
 */
//Upload class of layui
namespace app\admin\controller;
use think\Controller;
use think\Request;

class Upload extends Controller{


    public function doup(){
        $file=Request::instance()->file('file');
        if(empty($file)){
            $result["code"] = "1";
            $result["msg"] = "Please select a picture";
            $result['data']["src"] = '';
        }else{
            // Move to the framework application root directory / public/uploads /
            $info = $file->move(ROOT_PATH . 'public/static' . DS . 'uploads' );
            if($info){
                $name_path =str_replace('\\',"/",$info->getSaveName());
                //Get upload information after successful upload
                $result["code"] = '0';
                $result["msg"] = "Upload success";
                $result['data']["src"] ="/public/static/uploads/".$name_path;
            }else{
                // Upload failed to get error information
                $result["code"] = "2";
                $result["msg"] = "Upload error";
                $result['data']["src"] ='';
            }


        }

        return json_encode($result);


    }


}

I also copy this PHP processing file from the Internet and modify it

To upload a picture, you must create the uploads folder in the path specified in your code. Otherwise, the upload will fail. If there are already uploaded pictures under uploads, but the displayed pictures report errors, check whether the return path is correct

Posted by tacojohn on Fri, 03 Apr 2020 03:24:35 -0700