首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Laravel上传TinyMCE图像,不使用文件管理器

的方法如下:

  1. 配置路由:在routes/web.php文件中添加一个POST路由,用于处理上传图片的请求。
代码语言:txt
复制
Route::post('/upload-image', 'ImageController@upload')->name('upload.image');
  1. 创建控制器:使用以下命令创建一个名为ImageController的控制器。
代码语言:txt
复制
php artisan make:controller ImageController
  1. ImageController中添加upload方法,用于处理图片上传逻辑。
代码语言:txt
复制
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
    public function upload(Request $request)
    {
        $file = $request->file('image');
        
        // 验证文件是否上传成功
        if ($file->isValid()) {
            // 生成唯一文件名
            $filename = uniqid() . '.' . $file->getClientOriginalExtension();
            
            // 保存文件到指定路径
            Storage::disk('public')->putFileAs('images', $file, $filename);
            
            // 返回图片的URL
            $url = Storage::disk('public')->url('images/' . $filename);
            
            return response()->json(['url' => $url]);
        }
        
        return response()->json(['error' => '文件上传失败']);
    }
}
  1. 配置存储驱动:在.env文件中配置存储驱动为public,并设置存储路径。
代码语言:txt
复制
FILESYSTEM_DRIVER=public
  1. 创建存储链接:使用以下命令创建一个公共存储链接。
代码语言:txt
复制
php artisan storage:link
  1. 前端代码:在使用TinyMCE的页面中,添加一个图片上传按钮,并使用AJAX将图片上传到服务器。
代码语言:txt
复制
<form id="image-upload-form" enctype="multipart/form-data">
    <input type="file" name="image" id="image-input">
</form>

<script>
    document.getElementById('image-input').addEventListener('change', function() {
        var form = document.getElementById('image-upload-form');
        var formData = new FormData(form);
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route('upload.image') }}', true);
        
        xhr.onload = function() {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                var imageUrl = response.url;
                
                // 将图片插入到TinyMCE编辑器中
                tinymce.activeEditor.execCommand('mceInsertContent', false, '<img src="' + imageUrl + '">');
            }
        };
        
        xhr.send(formData);
    });
</script>

以上代码实现了使用Laravel上传TinyMCE图像的功能。用户在页面中选择图片后,通过AJAX将图片上传到服务器,并将返回的图片URL插入到TinyMCE编辑器中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券