データをキャッチする関数を使用して、バックエンドで処理される FastAPI / Starlette フォームがあります。
ユーザーがファイルをアップロードし、それがサーバー (またはローカル マシン) に保存されると、ページがクラッシュし、更新できるようになるまで数十秒待たなければなりません。
/upload ページの HTML フォーム:
<form action="/upload" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="file" class="form-control-file" name='upload_file' id="upload_file">
<button id="upload" type='submit' class="btn btn-primary">Upload</button>
</form>
Python バックエンド:
@app.post("/upload")
async def handle_form(request: Request,
upload_file: UploadFile = File(...)):
Path("/app/uploads").mkdir(parents=True, exist_ok=True)
with open(f"app/uploads/{upload_file.filename}", "wb+") as file_object:
file_object.write(upload_file.file.read())
return templates.TemplateResponse('upload.html', context={'request': request})
[アップロード] ボタンをクリックすると、バックエンドの正しいディレクトリ ( ) にファイルが作成されるまでに数秒または数分かかりますapp/uploads
。その間、ブラウザではページの応答が停止し、次のように置き換えられます。
これは Edge のスクリーンショットで、「申し訳ありませんが、このページにアクセスできません」というメッセージが表示されています。
もちろん、他のブラウザ、特にクロム ベースのブラウザもまったく同じ動作をします。
ページを更新して動作を確認できるようになるまで、数分待たなければなりません。
これを回避するにはどうすればよいですか?
UI を更新する前に、ファイルのアップロードが完了するまで待つにはどうすればよいですか?