ThinkPHP6 のリッチ テキスト エディターに画像をアップロードするにはどうすればよいですか?

ThinkPHP6 は、優れた PHP フレームワークとして、豊富な操作ライブラリとツールを提供し、開発者が機能要件をより迅速に認識できるようにします。 Web 開発では、ユーザーがコンテンツをより便利に編集できるようにするために必要なツールの 1 つとして、リッチ テキスト エディターがよく使用されます。ただし、ユーザーが写真を挿入したい場合は、写真アップロード機能をサポートする必要があります。

この記事では、UMEditorを例に、ThinkPHP6にリッチテキストエディタの画像アップロード機能を実装する方法を紹介します。

ステップ 1: UMEditor を導入する

UMEditor のリソース ファイル (js、css、画像など) をプロジェクト ディレクトリ下の public ディレクトリに配置し、HTML に UMEditor を導入します。ページ関連のリソース ファイル。例は次のとおりです。

<!-- 引入UMEditor -->
<link href="/public/UMEditor/themes/default/css/umeditor.css" rel="stylesheet">
<script src="/public/UMEditor/umeditor.config.js"></script>
<script src="/public/UMEditor/umeditor.min.js"></script>

ステップ 2: 画像アップロード インターフェイスを作成する

ThinkPHP6 では、Route クラスと Controller クラスを通じてインターフェイスを作成できます。

1. 次のコードを使用して、routes ディレクトリに Upload.php ファイルを作成します。

<?php
use thinkacadeRoute;

Route::post('upload/image', 'api/Upload/uploadImage');

このルートによってマップされるコントローラー メソッドは、アップロード コントローラーの UploadImage メソッドです。

2. アプリ ディレクトリに API ディレクトリを作成し、その API ディレクトリにアップロード コントローラーと UploadService サービスを作成します。コードは次のとおりです:

アップロード コントローラー:

<?php
namespace apppicontroller;

use apppiserviceUploadService;
use thinkacadeRequest;

class Upload
{
    public function uploadImage()
    {
        $file = Request::file('upfile');
        $uploadService = new UploadService();
        $result = $uploadService->uploadImage($file);
        return json($result);
    }
}

UploadService サービス:

<?php
namespace apppiservice;

use thinkacadeFilesystem;
use thinkacadeConfig;

class UploadService
{
    public function uploadImage($file)
    {
        $storage = Config::get('filesystem.default');
        $savename = Filesystem::disk($storage)->putFile('images', $file);
        $url = Config::get("filesystem.disks.{$storage}.url") . '/' . str_replace('\', '/', $savename);
        return [
            'state' => 'SUCCESS',
            'url' => $url,
            'title' => '',
            'original' => $file->getOriginalName(),
            'type' => $file->getOriginalExtension(),
            'size' => $file->getSize(),
        ];
    }
}

UploadService では、画像アップロードの目的を達成するために、ThinkPHP6 が提供するファイル ストレージ機能を使用します。特定の実装では、Filesystem クラスと Config クラスを使用します。設定ファイル config/filesystem.php で、対応するストレージ方法とパスを設定する必要があります。

ステップ 3: UMEditor を構成する

1. HTML ページで UMEditor をインスタンス化し、画像アップロード インターフェイスを構成します:

<script type="text/javascript">
    var um = UM.getEditor('myEditor', {
        imageUrl: '/upload/image',  //图片上传接口
        imageFieldName: 'upfile',   //图片提交的表单名称
        imageMaxSize: 2048000,      //图片大小限制，单位是字节
        imageAllowFiles: ['.jpg', '.png', '.gif', '.jpeg'],  //允许上传的图片类型
    });
</script>

2. UMEditor ファイルのアップロードを構成するパス:

<script type="text/javascript">
    UMEDITOR_CONFIG.serverUrl = '/public/UMEditor/php/controller.php/?action=';
</script>

controller.php では、画像アップロード要求を、先ほど作成した画像アップロード インターフェイスに転送する必要があります。

これまでのところ、ThinkPHP6 に UMEditor リッチ テキスト エディターの画像アップロード機能を実装することに成功しました。開発者は同様の方法を使用して、他のリッチ テキスト エディターの画像アップロード機能を実装できます。

以上がThinkPHP6 のリッチ テキスト エディターに画像をアップロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。