ThinkPHP6의 서식 있는 텍스트 편집기에 이미지를 업로드하는 방법은 무엇입니까?

ThinkPHP6은 뛰어난 PHP 프레임워크로서 풍부한 운영 라이브러리와 도구를 제공하여 개발자가 기능적 요구 사항을 더 빠르게 실현할 수 있도록 해줍니다. 웹 개발에서 서식 있는 텍스트 편집기는 사용자가 콘텐츠를 보다 편리하게 편집하는 데 도움이 되는 필수 도구 중 하나로 사용되는 경우가 많습니다. 그러나 사용자가 사진을 삽입하려면 사진 업로드 기능 지원이 필요합니다.

이 기사에서는 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. 다음 코드를 사용하여 경로 디렉터리에 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(),
        ];
    }
}

In 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에서 다음을 추가해야 합니다. image 업로드 요청은 방금 작성한 이미지 업로드 인터페이스로 전달됩니다.

지금까지 ThinkPHP6에서 UMEditor 리치 텍스트 편집기의 이미지 업로드 기능을 성공적으로 구현했습니다. 개발자는 유사한 방법을 사용하여 다른 서식 있는 텍스트 편집기의 이미지 업로드 기능을 구현할 수 있습니다.

위 내용은 ThinkPHP6의 서식 있는 텍스트 편집기에 이미지를 업로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!