文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

laravel-admin安装wang-Editor3之坑

2023-09-03 10:16

关注

先说坑,一开始不知道哪个步骤配置问题,在富文本中上传图片可以正常传到服务器,但是前端无法回显,一直提示图片上传失败,在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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯