Flask с Summernote и добавлением изображения - получение правильных данных? - PullRequest
0 голосов
/ 20 марта 2020

Итак, я пытаюсь получить информацию, которую можно получить через текстовую область summernote. Когда я не добавляю изображение, все работает отлично, и я вижу содержимое html в текстовом редакторе. Но когда я загружаю картинку, она внезапно застревает в oop ??? Там больше функциональности, которая фактически добавляет информацию в БД, и изображение с этим нелепым img sr c сохраняется, но по какой-то причине повторяется img sr c снова и снова? С тех пор у меня все было закомментировано, только для распечатки содержимого текстового поля, и по какой-то причине все еще получаю бесконечное l oop в тот момент, когда я нажимаю кнопку отправки? Спасибо за любую помощь, спасибо.

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>

Таким образом, текстовый редактор и все работает отлично, но как только я добавляю изображение и нажимаю на кнопку отправить, мой терминал застревает в бесконечном l oop, буквально нужно перевести sh терминал в порядок чтобы остановить его, прежде чем он падает. Спасибо за любые советы, спасибо.

Результаты: снова и снова ...

Ну, стек по потоку не позволил бы мне опубликовать пример, но это была просто куча того, что выглядело как img sr c код из SummerNote снова и снова

Обновление: - Итак, я изменил несколько вещей и, по крайней мере, перестал зацикливаться. Я предполагаю, что это никогда не повторяло того, что он делал, буквально распечатывал содержание того, что захватывало, и, очевидно, это куча дерьма. Затем я вместо этого пытался напечатать его с определенными параметрами, такими как "content [" img "], только чтобы выяснить, что это кусочки, так что это, очевидно, массив: но я выбрасываю его в тип, и он возвращается с классом" байт "и длиной 529288 .... lol! ТАК что печать не была oop, она буквально печатала 500 тыс. строк этого дурацкого преобразования ... (на мой взгляд, очень глупо, что summernote компилирует свои изображения таким образом) В любом случае, хотел опубликовать текущие изменения, я чувствую, что начинаю добиваться некоторого прогресса, поскольку он больше не застревает, пытаясь распечатать строки размером 500 тыс. Очевидно, что данные, которые собираются, являются общим приложением, преобразованным в байсы?, Потому что я чувствую изображение преобразование составляет около 7 тыс. символов, а не 500 тыс. ...

Мне кажется, моя проблема в том, как я пытаюсь получить данные? Так как мое приложение flask и python, это была пробная ошибка процесс пытается заставить его работать вместе со встроенным javascript. Так как моя логика c работает здесь, это момент, когда изображение вставлено в summernote, это Это добавлено в python logi c "updateTest". Все, что я пытаюсь сделать здесь, - это просто получить данные изображения, чтобы я мог манипулировать и поступать так же, как я sh с результатами. Как go о правильном получении этой информации? Спасибо за любой совет или понимание, спасибо.

Обновленный код:

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))

inline javascript в пределах HTML:

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

Любая помощь в том, как правильно извлекать эти данные файла / изображения, - это действительно то, что я сейчас ищу. Любая помощь приветствуется, спасибо

1 Ответ

0 голосов
/ 21 марта 2020

Так что я наконец понял это. Вот правильный код. теперь я изначально хотел, чтобы это работало с корзинами S3, поэтому, в конце, отправляясь по этому маршруту сразу же, вместо того, чтобы заниматься дерьмовым преобразованием, которое пытается сделать Summernote, я рекомендую всем делать то же самое, когда дело доходит до этого :

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">

inline javascript в пределах html:

<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)

ПРИМЕЧАНИЕ В другом месте у меня есть logi c, который добавляет данные в корзину S3, приведенный выше код просто отображает результат из моей корзины. Я планирую загрузить свой код для переполнения стека о том, как сделать полную ситуацию с s3 bucket с summernote. Поскольку это прямо здесь было только для того, чтобы закончить sh заключение моего первоначального "Застрять"

В любом случае, надеюсь, что это поможет любому, кто застрянет там, где я сделал, так как буквально нет соответствующей документации о том, как использовать summernote с flask ... (Не поймите меня неправильно, это много, но ни один из них не работает ..) И даже более того, NONE, который использует лучший метод, чем преобразование вашего изображения в последовательность символов размером 7 Кбайт, как я вижу больше всего люди делают ... Просто сохраняют эту ужасную чушь в своей БД ... Так что ничего не работает должным образом, по крайней мере, не то, что я нашел за последние 3 дня поиска ... Это здесь, единственное работающее решение, с которым я столкнулся.

Основная путаница заключается в смешивании javascript в передней части и разговоре с вашей флягой / python бэкэндом. Как только вы теперь, как получить эти данные, его плавное плавание.

...