laravel富文本编辑器使用&上传图片

wangeditor富文本编辑器: http://www.wangeditor.com/

案例使用laravel框架

1、定义2个路由

// /routes/web.php
Route::get('/test','Test\TestController@index');

// /routes/api.php
Route::post('/editor/upload/picture', 'Test\TestController@editorUploadPicture');
//编辑器上传图片,放到api中可以避免csrf校验

2、控制器

input('directory','editor-upload/');

        if(!$request->hasFile('picture')){
            return json_encode(['errno'=>0,'msg'=>'no file','data'=>[]]);
        }

        $picture = $request->file('picture');

        if($picture->isValid()) {
            $extension = $picture->getClientOriginalExtension();//获得上传文件后缀
            $newName = date('YmdH').'-' . mt_rand(1000, 9999) . '.' . $extension;

            $picture->move($directory, $newName);//上传文件到服务器指定目录,并重命名
            $picturePath = '/'.$directory . $newName; //给用户一个相对路径

            return json_encode(['errno'=>0,'msg'=>'ok','data'=>[$picturePath]]);
        }
        return json_encode(['errno'=>0,'msg'=>'error','data'=>[]]);
    }
}

3、视图




    
    
    
    Document
    
    


4、效果

laravel富文本编辑器使用&上传图片_第1张图片

laravel富文本编辑器使用&上传图片_第2张图片

转载于:https://www.cnblogs.com/mg007/p/11195931.html

你可能感兴趣的:(laravel富文本编辑器使用&上传图片)