Интеграция Laravel/vue-froala-wysiwyg

Я хочу внедрить систему загрузки изображений в свой Laravel/VueJS, но я не могу найти правильный способ сделать это. Как настроить функцию 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:

Я получаю сообщение об ошибке 419, связанное с токеном csrf. Итак, как я могу передать его функции? Я знаю, как его получить, но использование конфигурации imageUploadParams редактора не работает:

imageUploadParams: {
    csrf: this.csrf
}

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

vue.js laravel froala
person Enrique Bermúdez    schedule 05.02.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вам нужно передать правильное значение 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.

person Colin Smillie    schedule 23.10.2019

arrow_upward
0
arrow_downward

Из документации:

Когда изображение вставляется в HTML-редактор WYSIWYG, на сервер автоматически отправляется HTTP-запрос.

Конкретный URL-адрес, на который будет сделан запрос, можно указать с помощью параметра конфигурации imageUploadURL.

Настройте файл 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];
}

Конечно, не стесняйтесь делать любую проверку или обработку, которая вам нужна.

person Drown    schedule 06.02.2019
comment
Я делаю что-то подобное, но в моем методе есть несколько разных вещей. Прежде всего, я использую библиотеку Image Intervention для хранения изображений (и она работает, я тестировал ее на той же странице с простой формой). Я знаю, что этот метод возвращает URL-адрес файла, поэтому я могу сделать что-то вроде: $multimedia->path. Так вот, в документации сказано, что добавление этого в конфигурацию моего редактора: imageUploadParam: 'imageFile' позволяет мне получить такой файл на моем контроллере: $request['imageFile'] верно? Ну, это не работает для меня. Файл не сохраняется. Любая идея, почему? - person Enrique Bermúdez; 06.02.2019

arrow_upward
0
arrow_downward

инстанс

imageUploadParams: {
    csrf: this.csrf
}

использовать это

imageUploadParams: {
    _token: this.csrf
}

Проверьте это из документации.

person Abed Putra    schedule 15.07.2021