富文本编辑器 上传配置

富文本编辑器 上传配置

运行环境
laravel5.7
simditor 富文本编辑器

前台配置

//html 部分
<textarea name="body" class="form-control" id="editor" rows="6" placeholder="请填入至少三个字">{{old('body',$topic->body)}}</textarea>

//js配置部分
    <script>
        $(document).ready(function () {
            var editor = new Simditor({
                textarea: $('#editor'),
                upload: {
                	//图片上传配置
                    url: '{{route('topics.upload_image')}}',
                    params: {_token: '{{csrf_token()}}'},
                    //服务器获取图片的键值
                    fileKey: 'upload_file',
                    //最多只能同时上传3张图片
                    connectionCount: 3,
                    leaveConfirm: '文件上传中,关闭此页面将取消上传'
                },
                pasteImage: true,
            });
        });
    </script>

路由

Route::post('upload_image',"TopicsController@upload_image")->name('upload_image');

后台接口处理

后台接口处理主要做两部分工作

1. 保存图片
2. 按照编辑器前台标准格式返回数据

    /**上传图片
     * @param Request $request
     * @param ImageUpload $imgUpload
     * @return array
     */
	public function upload_image(Request $request,ImageUpload $imgUpload)
    {
        $status=[
            'success'=>false,
            'msg'=>'图片上传失败',
            'flie_path'=>''
        ];
        //$imageUpload 为自定义的图片处理类,这里直接使用laravel的图片处理也行
        $result=$imgUpload->save($request->upload_file,'topics',\Auth::id(),1024);
        if($result){
            $status=[
                'success'=>true,
                'msg'=>'图片上传成功',
                'file_path'=>$result
            ];
        }
        return $status;
    }