我正在尝试遍历具有输入文件类型的多种形式,并将 Ajax 转换为 Flask
javascript看起来像这样:-
我在变量var upFC = document.getElementsByClassName('uploadImage');
下有一个表单列表
每种形式如下:-
<form method="post" action="/upload" enctype="multipart/form-data" id="f_x" class="uploadImage">
<input type="file" id="u_x">
<input type="submit" value="Submit" id="s_x">
</form>`
其中
x = [ 0 - 100 ]
然后将我使用此方法的文件Ajax
for (i = 0; i < upFC.length; i++) {
var cFile = upFC[i].elements[0].files;
var fileName = upFC[i].elements[0].value;
const fd = new FormData();
fd.append('file', cFile[i], rightName);
const fdx = new XMLHttpRequest();
fdx.open('post' , "/uploadIds" , true);
fdx.send(fd);
}
烧瓶代码如下:-
@app.route('/uploadIds', methods=['POST' , 'GET'])
def handle_uploadIds():
d = os.path.join(root,'uploads/')
allImages = request.files.to_dict();
print("\n\n activated - ids \n\n ")
print("\n\n all images \n\n == > ", allImages )
for file in allImages:
print(f"----\n\n {allImages[file]} \n\n")
fileName = allImages[file].filename
dest = "/".join([d, fileName ])
print(f"\n\n upload 1 is active :{fileName}\n\n")
allImages[file].save(dest)
return '', 204
无论我尝试使用哪种方法在烧瓶上,我总是正确地获取第一个文件,而其余循环只是空的..没有错误
我还在 JavaScript 端添加了日志,以查看formData
是否在每次循环时发送正确的文件,是的。
由于某种原因,flask接收了第一个文件,而没有收到其余文件。
在应用此代码以在发送之前跟踪formData之后。
for (var pair of fd.entries()) {
console.log(pair[0]+ ', ' + pair[1]);}
}
在Chrome控制台上,我得到了
file, [object File]
2 file,
根据我的代码打印的烧瓶输出
all images
== > {'file': <FileStorage: 'PHNZIH1062_id.png' ('image/png')>}
----
<FileStorage: 'PHNZIH1062_id.png' ('image/png')>
activated - ids
all images
== >
upload 1 is active :PHNZIH1062_id.png
{}
activated - ids
all images
== > {}
127.0.0.1 - - [13/Dec/2018 21:06:15] "POST /uploadIds HTTP/1.1" 204 -
127.0.0.1 - - [13/Dec/2018 21:06:15] "POST /uploadIds HTTP/1.1" 204 -
127.0.0.1 - - [13/Dec/2018 21:06:15] "POST /uploadIds HTTP/1.1" 204 -
我尝试过的方法:
request.files.getlist('file'):
request.files.to_dict():
request.files.items():
我尝试过的一些突出显示的方法: all 3 methods in this link
我不确定问题是否在烧瓶或 ajax 之内,但可能在烧瓶的代码之内
答案 0 :(得分:1)
结果非常简单,毕竟是客户端,我要做的就是更改此内容
var cFile = upFC[i].elements[0].files;
到
var cFile = upFC[0].elements[0].files;
因为那是[file object]
的位置。