Laravel/vue froala wysiwyg集成

我希望在我的Laravel/VueJS项目中实现，但我找不到正确的方法来实现。如何设置我的

控制器

功能以处理此上载

编辑：

这是我的编辑器配置：

config: {
    imageUploadParam: 'imageFile',
    imageUploadURL: '/froala/upload/image',
    imageUploadMethod: 'POST',
    imageMaxSize: 5 * 1024 * 1024,
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
}

这是处理请求的函数：

public function uploadImage(Request $request)
{
    $file = $request['imageFile'];

    $name = $file->getClientOriginalName();
    $name = strtolower(str_replace(' ', '', $name));

    $path = $file->hashName();
    $image = Image::make($file);

    Storage::put("/threads/{$path}", (string) $image->encode());

    $multimedia = Multimedia::create([
        'name' => $name,
        'path' => $path
    ]);

    return ['link' => $multimedia->path];
}

我正在使用库来处理图像上传

编辑2:

我得到一个与

csrf

令牌相关的419错误。那么，如何将其传递给函数呢？我知道如何获取它，但使用编辑器的

imageUploadParams

配置不起作用：

imageUploadParams: {
    csrf: this.csrf
}

csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),

---

从文件中：

将图像插入WYSIWYG HTML编辑器时，会自动向服务器发出HTTP请求

可以使用

imageUploadURL

config选项指定将向其发出请求的特定URL

设置

routes.php

文件以正确地将请求定向到所选控制器：

Route::post('/upload', 'FilesController@store');

然后，在控制器中，您可以像平常一样处理图像上传。重要的一点是，在保存文件后返回该文件的路径

返回的JSON需要如下所示：{“link”：“path/to/image.jpg”}

下面是一个可能的示例：

public function store(){
    $filepath = request()->file('file')->store('images', 'public');
    return ['link' => $filepath];
}

---

当然，您可以随意进行任何您需要的验证或处理

您需要传递正确的X-CSRF-TOKEN值以避免419错误

首先检查您是否在元标头中定义了令牌，如下所示：

 <meta name="csrf-token" content="{{ csrf_token() }}">

然后将以下内容添加到Froala配置部分：

 config: {
    requestHeaders: {
      'X-CSRF-TOKEN': csrf_token
    },

---

媒体文件现在应该通过Laravel中的媒体上传功能。

我正在做类似的事情，但我的方法有一些不同之处。首先，我使用图像干预库来存储图像（它是有效的，我在同一个页面中用一个简单的表单对它进行了测试）。我知道这个方法返回一个指向文件的url，这样我就可以执行如下操作：

$multimedia->path

。现在，文档中说，将它放在我的编辑器配置中：

imageUploadParam:'imageFile'

可以让我在我的控制器上获得这样的文件：

$request['imageFile']

对吗？嗯，这对我不起作用。文件未被存储。知道为什么吗？

 config: {
    requestHeaders: {
      'X-CSRF-TOKEN': csrf_token
    },