Question

我有一个提交按钮，用于上传图像和信息。调用“提交”按钮时，会同时发生以下情况：

向Flask应用发布请求。（用于更新信息）
JS ：（与上述同时）
- 获取对Flask应用的presignedPost请求。
- 一旦presignedPostRequest接收到s3的上传文件。

发生的事情是，对Flask的POST请求完成了，并告诉页面重新加载。发生这种情况时，AJAX请求将被取消（如果仍在处理中）。有时我的代码有效，而其他时候则无效。通过将time.sleep（3）添加到Flask应用程序中，我可以等待s3上传完成并且一切正常。这不是一个好的解决方案。

如何强制Flask等待JS功能完成？

我试图通过让用户直接发送到s3来保存服务器。对于他们应该更快。

等待3秒有效。查看chrome中的xhr日志可以了解发生了什么。

preventDefault() doesnt work because there are 2 requests happening. 


@users.route("/account", methods=['GET', 'POST'])
@login_required
def account():
    form = UpdateAccountForm()
    if form.validate_on_submit():
        if form.picture.data:
            # picture_file = save_picture(form.picture.data)
            # current_user.image_file = picture_file
            time.sleep(3)
        current_user.username = form.username.data
        current_user.email = form.email.data
        db.session.commit()
        flash('Your account has been updated!', 'success')
        return redirect(url_for('users.account'))
    elif request.method == 'GET':
        form.username.data = current_user.username
        form.email.data = current_user.email
    image_file = url_for('static', filename='profile_pics/' + current_user.image_file)
    return render_template('account.html', title='Account',
                       image_file=image_file, form=form)

ctrl + K不起作用，因此这是一个简短的JS版本。 Ctrl + K将转到我在Chrome浏览器中的网址栏。：-（

function uploadfile() {
    **Get PresignedPostRequest**
    **Upload file to s3**
} 

document.getElementById("submit").onclick = function() {uploadfile()

};

我知道为什么这样做会如此，但是我不知道一个合理的解决方案。我是否需要更改设计模式？我使用烧瓶是因为我在JS上比较弱。

刚刚从Bootcamp毕业了，所以我对此很陌生。我可以通过我的应用程序运行所有内容，但是在我的服务器上会更加困难... 我想我可以使用socket.io，但这是另一层复杂的事情。...

感谢您的光临！

Answer 1

我将代码更改为其他方法。几天后，我回来寻求朋友的帮助，我的代码运行正常。这是我用来解决问题的方法。知道为什么这两天都没用...

document.getElementById("accountForm").onsubmit = function (e) {
    e.preventDefault();

    uploadfile();

    document.getElementById('accountForm').submit();

强制烧瓶在重新加载之前等待异步JS功能

1 个答案: