前提・実現したいこと
JavaScript で xhr を用いて PHP に向けてファイルをアップロードしています。
普通の回線ではファイルが届くのですが、低速回線にすると failed になってしまいます。
PHP側ではファイルサイズ[0]など空の情報が届いています。
ファイルサイズとも相関しているようで、軽いファイルは送れたりします。
こういったケースでファイルを届けるには、分割するしかないのでしょうか。
一般のサービスなどでは時間がかかるものの、1本の通信で送れているように見受けられます。
また、フロント・サーバーともにタイムアウトしているかも知れませんが、こちらはまだ調べきれてません。
低速回線でも失敗せずに xhr でファイルを送信できるようにするには、どういったアプローチがありますか?
※4.46MのPDFに対して200kbpsと設定すると、25秒ぐらいでfailedになります。
発生している問題・エラーメッセージ
xhr が failed readyState は 1 → 4 となってしまい 2 になりません。
該当のソースコード
<html lang="ja"> <head> <meta charset="utf-8" /> <script type="text/javascript"> function upload() { let typeFileInput = document.getElementById("typeFile"); let file = typeFileInput.files[0]; let formdata = new FormData(); formdata.append("input", file); let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { console.log("readyState", xmlhttp.readyState); console.log("responseText", xmlhttp.responseText); console.log(xmlhttp.status, xmlhttp.statusText); }; xmlhttp.open("POST", "test.php", true); xmlhttp.send(formdata); } </script> </head> <body> <div> <input id="typeFile" type="file" /> <button type="button" onclick="upload()">upload</button> </div> </body> </html>
<html lang="ja"> <head> <meta charset="utf-8" /> </head> <body> <form action="test.php" method="POST" enctype="multipart/form-data"> <input id="typeFile" name="input" type="file" /> <input type="submit" value="submit" /> </form> </body> </html>
試したこと
PHP 使用メモリを上げる
FormData をやめる
Apache の conf にて以下を設定
SSLSessionCacheTimeout 300000 Timeout 300000
max_input_time 60 → 60000 に
4.46M 200kbps は 26秒程度で failed
4.46M 2400kbps なら 成功
パケットキャプチャを覗いてみる
補足情報
すべて Docker によるローカル環境(Apache)
低速回線の検証は Chrome の開発者ツールを利用
PHPはログを出力するだけ
パケットキャプチャによると、ファイルを送る POST 自体が届かずにサーバーから RST が送られ failed となっていました
回答4件
あなたの回答
tips
プレビュー