Laravel/Vue-Froala-Wysiwyg集成 [英] Laravel / vue-froala-wysiwyg integration

问题描述

我想实现图像上传系统在我的 Laravel/VueJS 项目中，但是我找不到正确的方法.如何设置我的Controller函数以处理此上载?

I'll like to implemente the image upload system within my Laravel/VueJS project but I can't find a right way to do so. How can I set up my Controller function in order to handle this upload?

这是我的编辑器配置:

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

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

I am using the Intervention Image library to handle the image upload.

我遇到与csrf令牌相关的419错误.那么，如何将其传递给函数?我知道如何获取它，但是使用编辑器的imageUploadParams配置不起作用:

I'm getting an 419 error related with the csrf token. So, how can i pass it to the function? I know how to get it but using the imageUploadParams configuration of the editor is not working:

imageUploadParams: {
    csrf: this.csrf
}

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

推荐答案

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

You need to pass the correct X-CSRF-TOKEN value to avoid the 419 error.

首先检查您是否已在令牌标头中使用类似以下内容的令牌定义了令牌:

First check that you have the token defined the in the meta header with something like:

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

在您的VueJS中添加:

Early in your VueJS add:

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

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

Then add the following to your Froala config section:

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

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

Media files should now pass through to your media upload function in Laravel.

这篇关于Laravel/Vue-Froala-Wysiwyg集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！