Laravel / vue-froala-wysiwyg 集成答案

【问题标题】：Laravel / vue-froala-wysiwyg integrationLaravel / vue-froala-wysiwyg 集成
【发布时间】：2019-06-29 21:15:29
【问题描述】：

我想在我的 Laravel/VueJS 项目中实现image upload system，但我找不到正确的方法。如何设置我的Controller 函数来处理此上传？

编辑：

这是我的编辑器配置：

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];
}

我正在使用Intervention Image 库来处理图片上传。

编辑 2：

我收到与 csrf 令牌相关的 419 错误。那么，我怎样才能将它传递给函数呢？我知道如何获取它，但是使用编辑器的imageUploadParams 配置不起作用：

imageUploadParams: {
    csrf: this.csrf
}

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

【问题讨论】：

标签： laravel vue.js froala

【解决方案1】：

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

首先检查您是否在元标题中定义了令牌，例如：

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

在你的 VueJS 的早期添加：

var csrf_token = $('meta[name="csrf-token"]').attr('content');

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

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

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

【讨论】：

【解决方案2】：

来自文档：

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

可以使用imageUploadURL 配置选项指定将发出请求的特定 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];
}

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

【讨论】：

我正在做类似的事情，但我的方法有一些不同的东西。首先，我使用 Image Intervention 库来存储图像（它可以工作，我已经用一个简单的表单在同一页面中对其进行了测试）。我知道此方法会返回文件的 url，因此我可以执行以下操作：$multimedia->path。现在，文档说把它放在我的编辑器配置中：imageUploadParam: 'imageFile' 让我在我的控制器上得到这样的文件：$request['imageFile'] 对吗？好吧，它对我不起作用。该文件没有被存储。知道为什么吗？

【解决方案3】：

代表

imageUploadParams: {
    csrf: this.csrf
}

使用这个

imageUploadParams: {
    _token: this.csrf
}

检查this out来自文档

【讨论】：