Bagaimana untuk memuat naik imej ke editor teks kaya dalam ThinkPHP6?

ThinkPHP6, sebagai rangka kerja PHP yang sangat baik, menyediakan banyak perpustakaan operasi dan alatan, membolehkan pembangun merealisasikan keperluan fungsian dengan lebih cepat. Dalam pembangunan web, editor teks kaya sering digunakan sebagai salah satu alat yang diperlukan untuk membantu pengguna mengedit kandungan dengan lebih mudah. Walau bagaimanapun, apabila pengguna ingin memasukkan gambar, mereka perlu mempunyai sokongan fungsi muat naik gambar.

Artikel ini akan menggunakan UMEditor sebagai contoh untuk memperkenalkan cara melaksanakan fungsi muat naik imej editor teks kaya dalam ThinkPHP6.

Langkah pertama: Perkenalkan UMEditor

Letakkan fail sumber UMEditor (termasuk js, css, imej, dll.) ke dalam direktori awam di bawah direktori projek, dan kemudian perkenalkan UMEditor dalam HTML halaman Fail sumber berkaitan. Contohnya adalah seperti berikut:

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

Langkah 2: Tulis antara muka muat naik imej

Dalam ThinkPHP6, antara muka boleh ditulis melalui kelas Route dan kelas Pengawal.

1. Buat fail upload.php dalam direktori route dengan kod berikut:

<?php
use thinkacadeRoute;

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

Kaedah pengawal yang dipetakan oleh laluan ini ialah kaedah muat naikImej pengawal Muat naik.

2. Buat direktori api dalam direktori apl, dan kemudian buat pengawal Muat Naik dan perkhidmatan UploadService dalam direktori api Kodnya adalah seperti berikut:

Pengawal muat naik :

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

Dalam UploadService, kami menggunakan fungsi storan fail yang disediakan oleh ThinkPHP6 untuk mencapai tujuan muat naik imej. Pelaksanaan khusus menggunakan kelas Sistem Fail dan kelas Konfig. Dalam fail konfigurasi config/filesystem.php, kaedah dan laluan storan yang sepadan perlu dikonfigurasikan.

Langkah 3: Konfigurasikan UMEditor

1. Segera UMEditor dalam halaman HTML dan konfigurasikan antara muka muat naik imej:

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

2. Konfigurasikan muat naik Fail UMEditor laluan:

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

Dalam controller.php, permintaan muat naik imej perlu dimajukan ke antara muka muat naik imej yang baru kami tulis.

Setakat ini, kami telah berjaya melaksanakan fungsi muat naik imej editor teks kaya UMEditor dalam ThinkPHP6. Pembangun boleh menggunakan kaedah yang serupa untuk melaksanakan fungsi muat naik imej penyunting teks kaya yang lain.

Atas ialah kandungan terperinci Bagaimana untuk memuat naik imej ke editor teks kaya dalam ThinkPHP6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!