Summernote 上传图片：onImageUpload 和 sendFile 功能不起作用答案

【问题标题】：summernote upload image: onImageUpload and sendFile function not workingSummernote 上传图片：onImageUpload 和 sendFile 功能不起作用
【发布时间】：2020-03-18 20:33:07
【问题描述】：

我正在使用 Summernote v 0.8.12

我的 Summernote 页面：

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>bootstrap4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
    <script>
      $(document).ready(function() {
    $("#summernote").summernote({
      placeholder: 'enter directions here...',
            height: 300,
            callbacks: {
            onImageUpload : function(files, editor, welEditable) {

         for(var i = files.length - 1; i >= 0; i--) {
                 sendFile(files[i], this);
        }
    }
}
});
});
        function sendFile(file, el) {
    var form_data = new FormData();
    form_data.append('file', file);
    $.ajax({
        data: form_data,
        type: "POST",
        url: 'editor-upload2.php',
        cache: false,
        contentType: false,
        processData: false,
    success: function(url) {
    $(el).summernote('editor.insertImage', url);
   }
    });
    }

    </script>

  </head>
  <body>
    <form action="" method="post">
    <input name="subject" class="form-control" />
      <textarea id="summernote" name="body"></textarea>
      <input name="button" type="submit" value="Submit" id="button">
    </form>

  </body>
</html>

上传图片的php文件editor-upload2.php：

<?php
if ($_FILES['file']['name']) {
            if (!$_FILES['file']['error']) {
                $name = md5(rand(100, 200));
                $ext = explode('.', $_FILES['file']['name']);
                $filename = $name . '.' . $ext[1];
                $destination = 'images/' . $filename; //change this directory
                $location = $_FILES["file"]["tmp_name"];
                move_uploaded_file($location, $destination);
                echo 'https://www.mysite.co.uk/folder/emails/' . $filename;//change this URL
            }
            else
            {
              echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
            }
        }
?>

summernote 页面似乎没有将任何信息传递给 editor-upload2.php 文件，因为没有上传任何内容，也没有任何内容出现在 summernote 表单 textarea 中。

任何帮助将不胜感激。

非常感谢您阅读本文。

【问题讨论】：

你能在浏览器上打开一个 web 控制台并描述相关的网络调用吗？有没有网络调用，网络调用失败等？
这就是我的想法，因为我在另一个页面上创建了一个简单的表单，文件上传到了 editor-upload.php 脚本，但是如果我在与 editor-upload.php 相同的页面它确实有效
我意识到在另一个页面上的简单表单上，我将文件命名为文件上传测试而不是文件，所以现在可以正常工作了。
summernote 仍然不适合我，
我看过了，点击图片上传图片时没有网络调用

标签： javascript php ajax wysiwyg summernote

【解决方案1】：

主页标题中的以下脚本阻止了它的工作：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

我从 url 中去掉了“slim”，现在它可以正常工作了

【讨论】：