layui的富文本编辑器如何上传图片 以及后期处理

为什么80%的码农都做不了架构师？>>>

前端页面以及JS如下:

<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'); //建立编辑器});</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" >提交</button><button type="reset" class="layui-btn-primary layui-btn">重置</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')}";//上传图片urllayedit.set({uploadImage: {url:up_url //接口url,type: 'post' //默认post}});//建立编辑器var index=layedit.build('tweets');form.on('submit(tweets_sub)', function(data){//layer.msg(JSON.stringify(data.field));//获取编辑器的值var tweets_content=layedit.getContent(index);//ajax提交处理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>

这里和之前我用过的百度的Ueditor不一样,这里是直接上传图片就处理

var up_url="{:url('Upload/doup')}";//上传图片urllayedit.set({uploadImage: {url:up_url //接口url,type: 'post' //默认post}});

处理接口PHP文件如下

<?php/*** Created by PhpStorm.* User: martinby* Date: /3/5* Time: 23:25*///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"] = "请选择图片";$result['data']["src"] = '';}else{// 移动到框架应用根目录/public/uploads/ 目录下$info = $file->move(ROOT_PATH . 'public/static' . DS . 'uploads' );if($info){$name_path =str_replace('\\',"/",$info->getSaveName());//成功上传后 获取上传信息$result["code"] = '0';$result["msg"] = "上传成功";$result['data']["src"] ="/public/static/uploads/".$name_path;}else{// 上传失败获取错误信息$result["code"] = "2";$result["msg"] = "上传出错";$result['data']["src"] ='';}}return json_encode($result);}}

这个PHP处理文件我也是从网上copy下来,修改了一下

要上传图片必须要在你这里代码指定中的路径去创建uploads文件夹,不然会上传不成功,如果uploads下已经有了你上传的图片,但是显示的图片报错,那么检查一下这个返回的路径是否正确.