Laravel 5 и Summernote – загруженное изображение не отображается

Я пытаюсь установить summernote на свой веб-сайт, построенный на Laravel 5. Однако, что бы я ни делал, я не могу отобразить загруженный файл изображения в редакторе.

$(document).ready(function() {
$.ajaxSetup({
    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
$('#summernote').summernote({
    height: 400,
    onImageUpload: function(files) {
        data = new FormData();
        data.append("image", files[0]);
        $.ajax({
            data: data,
            type: "POST",
            url: "/image/upload",
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                console.log(url);
                // trying to make the image show up here...
            }
        });
    }
});

И это php-код, и он работает.

public function upload_image(ImageRequest $request)
{
    if($request->hasFile('image')){
        $filename = str_random(20).'_'.$request->file('image')->getClientOriginalName();
        $image_path = base_path() . '/public/images/thread/';
        $request->file('image')->move(
            $image_path, $filename
        );
        echo $filename;    
    }
    else{
        echo 'Oh No! Uploading your image has failed.';
    }
}

Я использую самую последнюю основную версию Summernote, и вот список вещей, которые я пробовал до сих пор:

  1. Нашел похожий вопрос и попробовал, что он говорит, но не повезло.
  2. Посетили документацию Summote API и попробовали '$summernote.summernote('insertNode', imgNode) ;' но получает только ошибку - complaning 'TypeError: a.nodeName is undefined'.
  3. Ну, мои коды основаны на этом, но 'editor.insertImage(welEditable, url);' уже устарел, поэтому больше не полезен.

  4. Пробовал следующие коды на основе № 2. В основном пытаясь увидеть, можно ли добавить изображения с других веб-сайтов, предполагая, что мой путь к изображению неверен. Но не работает.

    //Полный путь?

    $('#summernote').summernote("insertImage", 'http://animalia-life.com/data_images/fish/fish1.jpg');

    //Если нет, то полный путь с опцией 'filename'?

    $('#summernote').summernote("insertImage", 'http://animalia-life.com/data_images/fish/fish1.jpg','имя файла');

    //Если нет, то путь + имя файла?

    $('#summernote').summernote("insertImage", 'http://animalia-life.com/data_images/fish','fish1.jpg');

    //Если нет, то путь +/?

    $('#summernote').summernote("insertImage", 'http://animalia-life.com/data_images/fish/','fish1.jpg');

  5. Пробовал, можно ли добавить изображение данных, и ЭТО РАБОТАЕТ. НО ПОЧЕМУ.

    // изображение данных?

    $('#summernote').summernote("insertImage", 'data:image/jpeg;base64,/9j/4AAQSkZ...blahblah....');

В этот момент я узнал, что $('#summernote').summernote("insertImage", ... ) на самом деле работает, но параметр URL-адреса изображения, возможно, не работает. Кто-нибудь успешно реализовал эту функцию в последней версии Summernote? или... Я что-то пропустил?


php laravel summernote
person Raccoon    schedule 28.07.2015    source источник
comment
Вот хорошее решение, которое я предоставлю вам все, что вы хотите ....... просто перейдите по этой ссылке somrat.info/summarnote-image-upload-with-laravel   -  person Nazmul Hossain    schedule 05.04.2017

Ответы (1)


arrow_upward
2
arrow_downward

Догадаться.

base_path() дает мне физический локальный путь к загруженному файлу на моем ПК. Однако все это работает на MAMP. Таким образом, URL-адрес должен быть чем-то вроде «http://localhost:8888/image/..... .'

$(document).ready(function() {
var IMAGE_PATH = 'http://localhost:8000/images/thread/';

$.ajaxSetup({
    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content')     }
});
$('#summernote').summernote({
    height: 400,
    onImageUpload: function(files) {
        data = new FormData();
        data.append("image", files[0]);
        $.ajax({
            data: data,
            type: "POST",
            url: "/image/upload",
            cache: false,
            contentType: false,
            processData: false,
            success: function(filename) {
                var file_path = IMAGE_PATH + filename;
                console.log(file_path);
                $('#summernote').summernote("insertImage", file_path);
            }
        });
    }
});

});

person Raccoon    schedule 28.07.2015
comment
Вы также можете изменить порты в MAMP на порты по умолчанию. - person Dimitri Acosta; 28.07.2015