Laravel 5 和 Summernote - 上传的图片未显示

Question

我正在尝试在我的基于 Laravel 5 的网站上安装 summernote。但是，无论我做什么，我都无法使上传的图像文件显示在编辑器上。

$(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);' 但只会得到错误 - 抱怨“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 ','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');

5. 尝试过是否可以添加数据图像，并且可以正常工作。 但为什么。

   //数据图像？

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

在这一点上，我了解到$('#summernote').summernote("insertImage", ... )实际上有效，但图像 url 参数可能无效。 有没有人用最新版本的 Summernote 成功实现了这个功能？ 或者......我在这里错过了什么吗？

Answer 1

弄清楚了。

base_path() 为我提供了 PC 上上传文件的物理本地路径。 但是，整个过程都在 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);
            }
        });
    }
});

});