Question

我想在我的 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'),

Answer 1

从文档中：

将图像插入WYSIWYG HTML编辑器后，会对服务器自动执行HTTP请求。

可以使用module "k8s-cassandra" config选项指定将请求发送到的特定URL。

设置您的imageUploadURL文件以将请求正确定向到您选择的控制器：

routes.php

然后，您可以在控制器中像平常一样处理图像上载。重要的部分是保存文件后，将其返回到文件的路径。

返回的JSON需要看起来像：{“ link”：“ path / to / image.jpg”}

下面是一个看起来像的例子：

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

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

Answer 2

您需要传递正确的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中的媒体上传功能。

Answer 3

实例

imageUploadParams: {
    csrf: this.csrf
}

使用这个

imageUploadParams: {
    _token: this.csrf
}

从文档中检查 this out

Laravel / Vue-Froala-Wysiwyg集成

3 个答案: