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主版本，以及我目前为止所做的事情清单：

Found a similar question并尝试了它所说的但没有运气。
访问Summote API documentation并尝试了＃summernote.summernote（＆＃39; insertNode＆＃39;，imgNode）;＆＃39;但只会出现错误 - 抱怨＆＃39; TypeError：a.nodeName未定义＆＃39;。
好吧，我的代码基于this但是＆＃39; editor.insertImage（welEditable，url）;＆＃39;已被弃用，因此不再有用。
根据＃2尝试以下代码。基本上试图看看是否可以添加来自其他网站的图像 - 假设我的图像路径错误。但是没有工作。

//完整路径？

$（＆＃39;＃summernote＆＃39;）。summernote（＆＃34; insertImage＆＃34;，＆＃39; http://animalia-life.com/data_images/fish/fish1.jpg＆＃39;）;

//如果没有，带有＆＃39;文件名的完整路径＆＃39;选项？

$（＆＃39;＃summernote＆＃39;）。summernote（＆＃34; insertImage＆＃34;，＆＃39; http://animalia-life.com/data_images/fish/fish1.jpg＆＃39;，＆＃39; filename＆＃39;） ;

//如果不是，路径+文件名？

$（＆＃39;＃summernote＆＃39;）。summernote（＆＃34; insertImage＆＃34;，＆＃39; http://animalia-life.com/data_images/fish＆＃39;，＆＃39; fish1.jpg＆＃39; ）;

//如果没有，路径+ /？

$（＆＃39;＃summernote＆＃39;）。summernote（＆＃34; insertImage＆＃34;，＆＃39; http://animalia-life.com/data_images/fish/＆＃39;，＆＃39; fish1.jpg＆＃39; ）;
尝试添加数据图像， IT工作。但为什么。

//数据图片？

$（＆＃39;＃summernote＆＃39;）。summernote（＆＃34; insertImage＆＃34;，＆＃39; data：image / jpeg; base64，/ 9j / 4AAQSkZ ... blahblah ... 。＆＃39）;

此时，我了解到 $（＆＃39;＃summernote＆＃39;）。summernote（＆＃34; insertImage＆＃34;，...）实际上正在运行但是image url参数可能不是。是否有人使用最新版本的Summernote成功实现了此功能？或者......我在这里错过了什么吗？

Answer 1

想出来。

base_path（）为我提供了PC上传文件的物理本地路径。但是，整个事情都在MAMP上运行。因此，网址必须类似于http://localhost:8888/image/ ......＆＃39;

$(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);
            }
        });
    }
});

}）;

Laravel 5＆amp; Summernote - 上传的图片未显示

1 个答案: