javascript - Summernote 图像上传在 codeigniter 中不起作用

Question

我已将 SummerNote 集成到我的网站中(使用 Codeigniter 构建)，并且对于文本来说它工作正常。但是对于图片上传，会出现以下问题。

Summernote 将图像读取为 base64。现在，这对于小图像来说效果很好，但是一旦图像很大，由于数据库中的 base64 创建的巨大字符串，图像最终不会渲染。

所以我尝试将图像保存在我的服务器中，然后使用该图像的链接。

代码如下:Summernote 脚本:

<script type="text/javascript">
$(document).ready(function() {
  $('#summernote').summernote({
    height: 300,
    onImageUpload: function(files) {
            sendFile(files[0]);
        }
  });
  function sendFile(file) {
        data = new FormData();
        data.append("files", file);
        upload_url = "<?php echo base_url(); ?>" + "general/upload_image";
        $.ajax({
            data: data,
            type: "POST",
            url: upload_url,
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                 $(this).summernote("insertImage", url);

            }
        });
    }
});

php upload_image 函数:

public function upload_image()
{
    if ($_FILES['file']['name']) {
        if (!$_FILES['file']['error']) {
            $name = md5(rand(100, 200));
            $ext = explode('.', $_FILES['file']['name']);
            $filename = $name . '.' . $ext[1];
            $destination = 'http://sitename.com/dist/img/blogimg/' . $filename; //change this directory
            $location = $_FILES["file"]["tmp_name"];
            move_uploaded_file($location, $destination);
            echo 'http://sitename.com/dist/img/blogimg/' . $filename;//change this URL
        }
        else
        {
            echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
        }
    }
}

现在，当我在 Summernote 中单击“插入图像”或拖放图像时，控制台中会显示以下错误的多个实例:

>Uncaught TypeError: Cannot read property 'nodeType' of undefined

这就是我想要达到的目标注意:该编辑器适用于博客。1. 用户单击插入图像并从计算机上传图像。2.图像显示在编辑器中(但在此步骤未上传到服务器)。3. 当用户单击提交按钮时，图像应作为图像文件保存在预定义的文件夹中。4. 当页面渲染时，它应该有

<img src="mysite.com/path_to_image"> 

现在是这样的

<img src="data:image/jpeg;base64,/9j/4AAQSkZJR....">)

请注意，我尝试在回调中使用 onImageUpload 但结果实际上没有发生任何事情，图像既没有上传到编辑器也没有上传到服务器中的文件夹。

我哪里出错了......？请帮我解决这个问题...

Answer 1

如果你的summernote版本在0.7之后

接下来

$('#summernote').summernote({
                height: 400,
                callbacks: {
                    onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0]);
                    } 
                }});