通过AJAX上传文件在Flask端返回空字典

Question

我有一个Flask应用程序，在我添加登录功能之前一直在工作。我遇到的问题是，我有一个模态，用户可以上传一个文件。

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>
<button type="button" class="btn btn-success" data-dismiss="modal" id="AddNotesSubmit">Submit</button>

然后是一个AJAX调用来上传文件:

// add notes post
$('#AddNotesSubmit').on('click', function(e) {
var notes = $("#note_text").val();
var schedule_id = $("#noteSchID").text();
console.log(notes);
e.preventDefault();
$.ajax({
type: "POST",
url: "/",
data: { AddNotes: "", schedule_id: schedule_id, notes: notes },
success:function(response){
$('#response').text(JSON.stringify(response));
}
});
var fullPath = $("#exampleInputFile").val();
var filename = fullPath.replace(/^.*[\/]/, '');
const form = $('#upload_pic')[0];
const pic = new FormData(form);
console.log(form);
console.log(pic);
console.log(filename);
if (filename != '') {
$.ajax({
type: "POST",
url: "/upload_pic",
data: pic,
processData: false,  // tell jQuery not to process the data
contentType: false   // tell jQuery not to set contentType
});
}

$('#modalAddNotes').modal('hide');
});
});

最后是我用来调试的Flask代码:

@app.route('/upload_pic', methods=['POST'])
def upload_pic():
print(' request.files: %s' %request.files)
files = request.files.get('files[]')
print(' files: %s' %files)

python端的命令行输出为:

request.files: ImmutableMultiDict([])
files: None

返回一个空字典。之前，当我使用:

时

uploaded_pic = request.files['exampleInputFile']

它工作了，但是现在包含了该代码，它抛出了一个400错误，因为'exampleInputFile'是request.files字典中的无效键。我从路线上删除了@login_required，它没有改变任何东西。

Answer 1

从我的角度来看，很难看出为什么你的代码不工作。在您的示例中，表单标记没有关闭。此外，你没有描述你的javascript代码是如何执行的。虽然我假设您使用的是单击事件，但我用提交事件测试了代码。我得出的结论是代码可以工作。

下面是我用于测试的变体:

<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>
<button type="submit" class="btn btn-success" data-dismiss="modal" id="AddNotesSubmit">Submit</button>
</form>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form[name="upload_pic"]').submit(function(event) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
$.ajax({
type: 'POST',
url: '/upload_pic',
data: formData,
processData: false,
contentType: false
}).done((data) => {
console.log(data);
})
});
});
</script>

@app.route('/upload_pic', methods=['POST'])
def upload_pic():
if 'exampleInputFile' in request.files:
file = request.files['exampleInputFile']
if file.filename != '':
# handle file here!
return jsonify(success=True)
return jsonify(success=False)