先说坑,一开始不知道哪个步骤配置问题,在富文本中上传图片可以正常传到服务器,但是前端无法回显,一直提示图片上传失败,在admin.php的wang-editor配置项中开启debug后,在浏览器console中也只是显示什么undefined。
后来干脆重写部署一个站点,安装配置完成wang-editor后,可以正常上传图片。于是再将这次的配置原封不动在前面那个站点配置,结果还是跟之前一样报错,折腾许久。后面干脆尝试清理下缓存,执行:php artisan cache:clear ,再上传图片,竟然成功了。很明显之前是因为laravel框架的缓存问题。
具体说下配置过程:
一、准备工作
首先安装laravel、laravel-admin,创建数据库,等等不多说,总之,需要先将站点运行起来。
我们将在文章(article)模块中使用这个富文本插件,自然需要创建article模块相关控制器、模型、路由等。
1、创建数据迁移表:php artisan make:migration create_articles_table --create=articles
2、创建数据表:在migrations目录下,进入刚才创建的迁移表,添加字段信息,然后再执行 php artisan migrate
3、创建模型:执行 php artisan make:model Article
4、创建laravel-admin控制器:执行 php artisan admin:make ArticleController --model=App\Models\Article
2.5、创建路由:在Admin/routes.php里添加路由 $router->resource('articles', ArticleController::class);
2.6、在admin后台添加文章管理菜单,这个就不多说
二、下载使用wang-editor插件
laravel-admin官方文档中有下载链接:https://github.com/laravel-admin-extensions/wangEditor,里面有安装步骤,基本就按里面进行:
安装
// laravel-admin 1.xcomposer require "laravel-admin-ext/wang-editor:1.*"// laravel-admin 2.xcomposer require laravel-admin-ext/wang-editor
然后
php artisan vendor:publish --tag=laravel-admin-wangEditor
配置
在config/admin.php文件的extensions,加上属于这个扩展的一些配置
'extensions' => [ 'wang-editor' => [ // 如果要关掉这个扩展,设置为false 'enable' => true, // 编辑器的配置 'config' => [] ] ]
编辑器的配置可以到wangEditor文档找到,比如配置上传图片的地址上传图片
'config' => [ // `/upload`接口用来上传文件,上传逻辑要自己实现,可参考下面的`上传图片` 'uploadImgServer' => '/upload' ]
在form表单中使用它:
$form->editor('content');
上传图片
图片上传默认使用base64格式化后与文本内容一起存入数据库,如果要上传图片到本地接口,那么下面是这个接口对应的action代码示例:
use Illuminate\Http\Request;use Illuminate\Support\Facades\Storage;public function upload(Request $request){ $urls = []; foreach ($request->file() as $file) { $urls[] = Storage::url($file->store('images')); } return [ "errno" => 0, "data" => $urls, ];}
Note: 配置路由指向这个action,存储的disk配置在config/filesystem.php中,这个需参考laravel官方文档。
上面的按照步骤操作就行,关键是最后的这个Note提示,这个是需要自己操作的,否则无法使用。
三、配置路由指向这个action
需要创建一个控制器以及路由,用来实现上面config配置项中的'uploadImgServer' => '/upload'
接口。
3.1、创建图片上传控制器,执行:php artisan make:controller UploadController,在控制器中写入upload方法:
namespace App\Http\Controllers;use Illuminate\Http\Request;use Illuminate\Support\Facades\Storage;class UploadController extends Controller{ // public function upload(Request $request) { $urls = []; foreach ($request->file() as $file) { $urls[] = Storage::url($file->store('public/images')); } return [ "errno" => 0, "data" => $urls, ]; }}
2、添加路由,在router/web.php里添加路由:
#上面要引入 use App\Http\Controllers\UploadController;Route::post('/upload',[UploadController::class,'upload']);
3、最后一步很重要,创建从 public/storage 到 storage/app/public 的符号链接。因为只有/public下资源才能公开访问。使用 Artisan 命令 storage:link 来创建符号链接。进入根目录:
php artisan storage:link
安装全部结束
补充说明:
如果回显报错提示无法访问的链接是http://localhost/
开头的,需要确认下配置项里有没有配置 'url' => env('APP_URL').'/upload',
如果有,则尝试删除或者修改env(‘APP_URL’)的变量值为你自己的域名
来源地址:https://blog.csdn.net/acvc225/article/details/130446200