thinkphp6作為一款優秀的php框架，提供了豐富的操作類庫和工具，使得開發者可以更快捷地實現功能需求。在網頁開發中，富文本編輯器常作為必備工具之一，可以幫助用戶更方便地編輯內容。然而，當用戶想要插入圖片時，就需要有圖片上傳功能支持。
本文將以UMEditor作為示例，介紹在thinkphp6中如何實現富文本編輯器圖片上傳功能。
第一步：引入UMEditor
將UMEditor的資源文件（包括JS、css、images等）放到項目目錄下的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>
第二步：編寫圖片上傳接口
立即學習“PHP免費學習筆記（深入）”；
在ThinkPHP6中，可以通過Route類和Controller類來實現接口的編寫。
- 在routes目錄下創建一個upload.php文件，代碼如下：
acadeRoute; Route::post('upload/image', 'api/Upload/uploadImage');
該路由映射的控制器方法為Upload控制器的uploadImage方法。
- 在app目錄下創建一個api目錄，然后在api目錄下創建一個Upload控制器和一個UploadService服務，代碼如下：
Upload控制器：
picontroller; use apppiserviceUploadService; use thinkacadeRequest; class Upload { public function uploadImage() { $file = Request::file('upfile'); $uploadService = new UploadService(); $result = $uploadService->uploadImage($file); return json($result); } }
UploadService服務：
piservice; use thinkacadeFilesystem; use thinkacadeConfig; 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中，需要配置相應的存儲方式和路徑。
第三步：配置UMEditor
- 在HTML頁面中實例化UMEditor，并配置圖片上傳接口：
<script type="text/javascript"> var um = UM.getEditor('myEditor', { imageUrl: '/upload/image', //圖片上傳接口 imageFieldName: 'upfile', //圖片提交的表單名稱 imageMaxSize: 2048000, //圖片大小限制，單位是字節 imageAllowFiles: ['.jpg', '.png', '.gif', '.jpeg'], //允許上傳的圖片類型 }); </script>
- 配置UMEditor的文件上傳路徑：
<script type="text/javascript"> UMEDITOR_CONFIG.serverUrl = '/public/UMEditor/php/controller.php/?action='; </script>
在controller.php中，需要將圖片上傳的請求轉發到我們剛剛編寫的圖片上傳接口。
至此，我們已經成功地在ThinkPHP6中實現了UMEditor富文本編輯器的圖片上傳功能。開發者可以通過類似的方法，實現其它富文本編輯器的圖片上傳功能。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
