使用Ajax从FormData中的Form发送图像不会出现在服务器端(Flask python)

问题描述 投票:0回答:1

我想创建具有文本区域和图像形式的Bootstrap Modal,并将其发送到服务器。

我的模态表单看起来像这样:

<form id="formData" method="POST" enctype="multipart/form-data">
    <fieldset class="form-group">
        <div class="form-group">
            <textarea class="form-control" id="content" name="content" required></textarea>
        </div>
        <div class="form-group">
            <label for="image">Got any photo?</label>
            <input class="form-control-file" id="image" name="image" type="file">
        </div>
    </fieldset>
    <button class="btn purple-btn-outline-modal" type="submit">Add</button>
</form>

我正在使用的AJAX:

var form = document.forms.namedItem("formData");
form.addEventListener('submit', function (ev) {
    var oData = new FormData(form);
    oData.append('image', $('#image')[0].files[0])
    for (var p of oData) {
        console.log(p); // <- logs image in oData correctly
    }
    $.ajax({
        url: '/test/',
        type: 'POST',
        method: 'POST',
        data: oData,
        enctype: 'multipart/form-data',
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
        },
    });
    ev.preventDefault();
}, false);

但是在服务器端(Python Flask),图像不是请求形式:

@main.route('/test/', methods=['POST'])
def test():
    if request.method == 'POST':
        app.logger.debug(request.form)            # ImmutableMultiDict([('content', 'my sent content')])
        app.logger.debug(request.form['content']) # 'my sent content'
        app.logger.debug(request.form['image'])   # <- KeyError: 'image'
    return jsonify(...)

怎么了?

javascript python jquery ajax multipartform-data
1个回答
0
投票

已解决。

© www.soinside.com 2019 - 2024. All rights reserved.