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

Posted 2023-03-21

【中文标题】Laravel 5 和 Summernote - 上传的图片未显示

【英文标题】：Laravel 5 & Summernote - Uploaded image not showing up

【发布时间】：2015-10-19 13:56:33

【问题描述】：

我正在尝试在基于 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('insertNode', imgNode);'但只会出错 - 抱怨“TypeError: a.nodeName is undefined”。 好吧，我的代码是基于this 但是'editor.insertImage(welEditable, url);'已弃用，因此不再有用。

根据 #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');

尝试是否可以添加数据图像，并且 它可以工作。但是为什么。

//数据图片？

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

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

【问题讨论】：

这是一个很好的解决方案，我为您提供所有您想要的......只需转到此链接somrat.info/summarnote-image-upload-with-laravel

【参考方案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);
            
        );
    
);

);

【讨论】：

您也可以将 MAMP 上的端口更改为默认端口。