前端代码：
wangEditor中要实现上传图片功能需要在editorConfig中添加一个对象属性。
const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
然后根据官方文档上的方法，填写uploadImage的上传地址
editorConfig.MENU_CONF["uploadImage"] = { server: "后台的请求地址" };
后端代码：
根据文档得到返回的数据需要下面图片的格式 ：
这里使用的是fastadmin框架来编写的接口
// 图片上传接口 public function image() { // 获取上传的文件 $file = request()->file('wangeditor-uploaded-image'); //找到项目的对应文件夹 // 移动文件到指定目录（这里假设是public/uploads目录） $info = $file->validate(['size' => 1024*1024, 'ext' => 'jpg,png,gif'])->move( '../public/uploads'); // 检查文件是否上传成功 if($info){ // 文件上传成功，返回图片信息 $image_url = '/uploads/' . $info->getSaveName(); // 图片地址 $image_name = $info->getFilename(); // 图片名称 $url = '页面前缀' . $image_url; return json([ 'errno' => 0, 'data' => [ 'url' => $url, 'alt' => $image_name, ] ]); }else{ // 文件上传失败 return json([ 'errno' => 1, 'data' => [], 'msg' => $file->getError() ]); } }
实现效果如下：
