Flask接收AJAX上传文件返回空字典报400错误问题排查

• 第一，移除提交按钮上的data-dismiss="modal"属性。Bootstrap内置的这个属性会在你点击按钮时第一时间隐藏/销毁模态框对应的DOM元素，导致后续执行的new FormData(form)无法从已经被移除的表单中读取文件内容，最终上传空数据。
• 第二，调整模态框关闭逻辑，不要在点击事件末尾直接执行关闭，要等文件上传请求完成之后再关闭，避免请求被中途中断。
• 第三，修正Flask后端获取文件的键名，和HTML中input的name属性保持一致。

修改后的HTML代码 #

<p>Upload Photo</p>
<form method="POST" name="upload_pic" id="upload_pic" enctype="multipart/form-data">
  <input type="file" class="custom-file-input" name="exampleInputFile" id="exampleInputFile" aria-describedby="fileHelp">
  <label class="custom-file-label" for="exampleInputFile">
   Select file...
  </label>
  <!-- 移除了自动关闭模态框的data-dismiss属性 -->
  <button type="button" class="btn btn-success" id="AddNotesSubmit">Submit</button>
</form>

修改后的AJAX代码 #

$('#AddNotesSubmit').on('click', function(e) {
    e.preventDefault();
    var notes = $("#note_text").val();
    var schedule_id = $("#noteSchID").text();
    var fullPath = $("#exampleInputFile").val();
    var filename = fullPath.replace(/^.*[\\\/]/, '');
    const form = $('#upload_pic')[0];
    const pic = new FormData(form);

    // 先提交普通笔记内容
    $.ajax({
        type: "POST",
        url: "/",
        data: { AddNotes: "", schedule_id: schedule_id, notes: notes },
        success:function(response){
           $('#response').text(JSON.stringify(response));
           // 笔记提交完成后处理文件上传
           if (filename != '') {
             $.ajax({
                 type: "POST",
                 url: "/upload_pic",
                 data: pic,
                 processData: false,
                 contentType: false,
                 // 文件上传完成后再关闭模态框
                 complete: function() {
                   $('#modalAddNotes').modal('hide');
                 }
             });
           } else {
             // 无文件需要上传，直接关闭模态框
             $('#modalAddNotes').modal('hide');
           }
        }
    });
});

修改后的Flask后端代码 #

@app.route('/upload_pic', methods=['POST'])
def upload_pic():
    print(' request.files: %s' %request.files)
    # 键名和input的name属性保持一致，用get方法避免键不存在时抛出400错误
    uploaded_pic = request.files.get('exampleInputFile')
    print(' uploaded_pic: %s' %uploaded_pic)
    # 此处补充文件保存逻辑
    return {"status": "success"}

内容的提问来源于stack exchange，提问作者Tony D.