How to upload images to the rich text editor in ThinkPHP6?

ThinkPHP6, as an excellent PHP framework, provides a wealth of operating libraries and tools, allowing developers to realize functional requirements more quickly. In web development, rich text editors are often used as one of the necessary tools to help users edit content more conveniently. However, when users want to insert pictures, they need to have picture upload function support.

This article will use UMEditor as an example to introduce how to implement the image upload function of the rich text editor in ThinkPHP6.

Step one: Introduce UMEditor

Put the resource files of UMEditor (including js, css, images, etc.) into the public directory under the project directory, and then introduce UMEditor in the HTML page Related resource files. An example is as follows:

<!-- 引入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>

Step 2: Write the image upload interface

In ThinkPHP6, you can write the interface through the Route class and the Controller class.

1. Create an upload.php file in the routes directory with the following code:

<?php
use thinkacadeRoute;

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

The controller method mapped by this route is the uploadImage method of the Upload controller.

2. Create an api directory in the app directory, and then create an Upload controller and an UploadService service in the api directory. The code is as follows:

Upload controller:

<?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 service:

<?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(),
        ];
    }
}

In UploadService, we use the file storage function provided by ThinkPHP6 to achieve the purpose of image uploading. The specific implementation uses the Filesystem class and Config class. In the configuration file config/filesystem.php, the corresponding storage method and path need to be configured.

Step 3: Configure UMEditor

1. Instantiate UMEditor in the HTML page and configure the image upload interface:

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

2. Configure UMEditor File upload path:

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

In controller.php, the image upload request needs to be forwarded to the image upload interface we just wrote.

So far, we have successfully implemented the image upload function of the UMEditor rich text editor in ThinkPHP6. Developers can use similar methods to implement the image upload function of other rich text editors.

The above is the detailed content of How to upload images to the rich text editor in ThinkPHP6?. For more information, please follow other related articles on the PHP Chinese website!