的方法如下:
routes/web.php
文件中添加一个POST路由,用于处理上传图片的请求。Route::post('/upload-image', 'ImageController@upload')->name('upload.image');
ImageController
的控制器。php artisan make:controller ImageController
ImageController
中添加upload
方法,用于处理图片上传逻辑。<?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' => '文件上传失败']);
}
}
.env
文件中配置存储驱动为public
,并设置存储路径。FILESYSTEM_DRIVER=public
php artisan storage:link
<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编辑器中。
领取专属 10元无门槛券
手把手带您无忧上云