概要
jsを使ってではなく、普通のhtmlの<input type="file" ...>タグからfastapiのバックエンドサーバーに複数画像をアップロードしようとした時にはまった備忘録です。
問題コード
index.html
<html>
<head>
<title>Face Swap App</title>
</head>
<body>
<h1>Look ma! HTML!</h1>
<form enctype="multipart/form-data" method="post" action="swap">
<input type="file" id="source" name="file"></input>
<input type="file" id="target" name="file"></input>
<input type="submit" value="Face Swap">
</form>
</body>
</html>
main.py
@app.post("/swap", response_class=HTMLResponse)
async def create_swapped_image(files: List[UploadFile] = File(...)):
print(files)
return """
<html>
<head>
<title>Face Swap App</title>
</head>
<body>
<h1>Success!</h1>
</body>
</html>
"""
解決法
結論から言えばinputタグのnameをfastapiのエンドポイントの関数の引数と同じにする必要があるようです！つまりindex.htmlのinputを
index.html
<input type="file" id="source" name="files">
<input type="file" id="target" name="files">
に変えることで解決しました。
全部読んだわけではないですが、こんなこと公式docに書いていた記憶がないのでわかりづらいなあと思いました。書いていたらごめんなさい、、