為什么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: 2018/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下已經有了你上傳的圖片,但是顯示的圖片報錯,那么檢查一下這個返回的路徑是否正確.

?

轉載于:https://my.oschina.net/laobia/blog/1630163

總結

以上是生活随笔為你收集整理的layui的富文本编辑器如何上传图片,以及后期处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。