带有Summernote的烧瓶并添加图像-抓取正确的数据？

Question

因此，我试图通过summernote textarea获取正在获取的信息。当我不添加图像时，一切正常，我从文本编辑器中看到了html内容。但是，当我上传图片时，它突然陷入了循环？实际上还有更多功能可以将信息添加到数据库中，并且可以保存具有可笑的img src的图像，但是由于某种原因，它会反复遍历img src？从那时起，Ive便将所有内容都注释掉了，只打印了文本字段的内容，由于某种原因，当我单击“提交”按钮时，仍然遇到无尽的循环吗？感谢您的任何帮助，谢谢。

flask.py

 @app.route("/update", methods=["POST"])
    def update():
    # Grab Text editor content from form:
    contentInfo = request.form["content"]

    print("TEST HERE", contentInfo)

html：

<form action="/update" method="POST">
 <h1 style="text-align:center">content</h1><textarea name=content id="summernote">{{value}</textarea>
 <input class="input-btn" type="submit" value="Update">
 </form>

HTML中的脚本初始化内联：

<script>
    $(document).ready(function() {
    $('#summernote').summernote({
        height: 300,
        minHeight: null,
        maxHeight: null,
        focus: true,
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0],editor,welEditable);
        }
        });
    });
</script>

因此，文本编辑器和所有功能都可以完美运行，但是当我添加图像并单击提交时，我的终端陷入了一个无休止的循环，从字面上讲，需要丢弃该终端以使其在崩溃之前停止。任何建议表示赞赏，谢谢。

结果：一遍又一遍...

Well Stack over flow不会让我发布示例，但这只是一堆又一遍，就像一遍又一遍的summernote的img src代码

更新：-因此，我更改了一些内容，至少使它停止了循环。我猜想它从来没有循环过所做的事情，而是从字面上打印出所抓取内容的内容，显然是一堆废话。然后，我改为尝试使用某些参数（例如“ content [“ img”]”来打印它，只是发现它是切片，因此这显然是一个数组：但是我将其放入类型中，并且返回了带有“字节”，长度为529288。...大声笑！所以打印不是一个循环，实际上是在打印这种愚蠢的转换的50万行...（我认为，summernote的超级笨拙以这种方式编译图像）无论如何，想要发布当前的更改，我觉得我已经开始取得一些进展，因为它不再试图打印50万行。显然，获取的数据是否已将整个应用转换为再见？因为我感觉图像转换大约是7k个字符，而不是500k ...

我觉得我的问题可能是我如何尝试获取数据？由于我的应用程序是flask和python，因此尝试将其与内联JavaScript一起使用是一个错误过程。所以我的逻辑在这里是如何工作的，就是当图像被放入summernote的那一刻，它就被扔到python逻辑“ updateTest”中。我在这里试图做的只是抓取图像数据，这样我就可以操作并做希望结果。如何正确获取此信息？感谢您提供任何建议或见识，谢谢。

更新的代码：

html:
<form action="/updateTest" method="POST">
 <h1 style="text-align:center">content</h1><textarea name=content id="summernote">{{value}</textarea>
 <input class="input-btn" type="submit" value="Update">

flask.py：

 @app.route("/updateTest", methods=["POST"])
def updateTest():
    content = request.get_data()
    print("test here", type(content))
    print("test here2", len(content))

HTML内联JavaScript：

$(document).ready(function() {
        $('#summernote').summernote({
            height: 300,
            focus: true,
            callbacks: {
                onImageUpload(files) {
                  sendFile(files[0], data => {
                    let imgNode = document.createElement("img");
                    imgNode.setAttribute('src', data.url)
                    $(this).summernote('insertNode', imgNode);
                  })
                }
              }
            });
        });
 var sendFile = function(file, callback) {
                    var data;
                    data = new FormData();
                    data.append("file", file);
                    return $.ajax({
                      url: "/updateTest",
                      data: data,
                      cache: false,
                      contentType: false,
                      processData: false,
                      type: 'POST',
                      success: function(data) {
                        return callback(data);
                      }
                    });
                  };

有关如何正确提取此文件/图像数据的任何帮助，我现在都在寻找。任何帮助表示赞赏，谢谢

Answer 1

所以我终于明白了。这是正确的代码。现在我本来希望它可以与S3存储桶一起使用，所以最后，直接去那条路线，而不是处理summernote尝试的cr脚转换，我建议其他人在执行类似这样的操作时都做同样的事情：

html：

<form action="/updateTest" method="POST">
 <h1 style="text-align:center">content</h1><textarea name=content id="summernote">{{value}</textarea>
 <input class="input-btn" type="submit" value="Update">

HTML内嵌JavaScript：

<style>
$(document).ready(function() {
        $('#summernote').summernote({
            height: 300,
            focus: true,
            callbacks: {
                onImageUpload(files) {
                  sendFile(files[0], data => {
                    let imgNode = document.createElement("img");
                    imgNode.setAttribute('src', data.url)
                    $(this).summernote('insertNode', imgNode);
                  })
                }
              }
            });
        });
                   var sendFile = function(file, callback) {
                    var data;
                    data = new FormData();
                    data.append("file", file);
                    return $.ajax({
                      url: "/addImgSummer",
                      data: data,
                      cache: false,
                      contentType: false,
                      processData: false,
                      type: 'POST',
                      success: function(data) {
                        return callback(data);
                      }
                    });
                  };
</style>

flask.py：

@app.route("/addImgSummer", methods=["POST"])
def addImgSummer():
    #Grabbing file:
    img = request.files["file"]    #<------ THIS LINE RIGHT HERE! Is #literally all I needed lol.

    # Below is me replacing the img "src" with my S3 bucket link attached, with the said filename that was added. 
    imgURL = "https://"+ S3_BUCKET_NAME +".s3.amazonaws.com/images/"+ img.filename

    return jsonify(url = imgURL)

NOTE我在其他地方有将数据添加到S3存储桶的逻辑，上面的代码只是呈现了我存储桶的结果。我计划上传我的代码，以在如何使用summernote进行完整的s3存储桶情况时溢出堆栈。因为这里的权利只是为了完成我最初的“被卡住”的结论]

无论如何，希望这对卡住我的人有所帮助，因为在字面上没有关于如何使用带有烧瓶的summernote的适当文档……（不要误会我的意思，但这没什么用。更是如此，没有比我将图像转换成7k字节字符序列更好的方法了，就像我看到的大多数人所做的一样……只是将那残酷的废话保存在他们的数据库中……所以什么都没有正常工作，至少不是我找到了过去三天的搜索。在这里，这是我遇到的唯一可行的解​​决方案。

主要的困惑在于在前端混合javascript，并与flask / python后端进行对话。一旦您现在如何获取这些数据，它就会顺利进行。