thinkphp wangEditor 圖片上傳

1.html

 

<div id="editor">
</div>
<!--
 wangEditor無法設置name屬性
 為上傳添加一個隱藏的textarea
-->
<textarea id="tarea" name="content" hidden></textarea>





<!-- 引入wangEditor JS -->
<script type="text/javascript" src="__STATIC__/wangEditor/release/wangEditor.min.js"></script> <!-- 配置wangEditor --> <script>
var E = window.wangEditor var editor = new E('#editor')// 上傳圖片到服務器
editor.customConfig.uploadImgServer = '/upload' ; // 將圖片大小限制為 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 限制一次最多上傳 3 張圖片
editor.customConfig.uploadImgMaxLength = 3; //監控wangEditor變化, 把內容更新到textarea中 var $tarea=$('#tarea');
editor.customConfig.onchange=function(html){
 $tarea.val(html)
};
 editor.create();
$tarea.val(editor.txt.html()); </script>

 

 

 

 2.tp5

    先設置路由: upload

 

Route::rule('upload','index/index/upload');

 

 

    控制器index中添加upload方法:

public function upload()
    {
        $files = request()->file();
        $imags = [];
        $errors = [];
        foreach($files as $file){
            // 移動圖片到/public/uploads/ 目錄下
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
               // 成功上傳 圖片地址加入到數組
                $path = '/uploads/'.$info->getSaveName();
                array_push($imags,$path);
            }else{
                array_push($errors,$file->getError());
            }
        }

        //輸出wangEditor規定的返回數據
        if(!$errors){
            $msg['errno'] = 0;
            $msg['data'] = $imags;
            return json($msg);
        }else{
            $msg['errno'] = 1;
            $msg['data'] = $imags;
            $msg['msg'] = "上傳出錯";
            return json($msg);
        }
    }    

 

3.提交表單