私は、ユーザーが写真を (ブラウザ内で) 編集してからアップロードできるようにする Web サイトに取り組んでいます。ブラウザー内で画像を編集するには、base64 の画像を処理する JavaScript ライブラリをいくつか使用します。その結果、画像をサーバーに POST するには、ファイル入力のある単純なフォームを使用できません。非表示の入力の値は、編集された画像の base64 文字列に設定され、POST されます。次の短い例を参照してください。
明らかに、これは非常に簡素化されていますが、私が直面している問題が含まれています。3MBのアニメーションGIFのPOSTで6.5分かかりました。その間、私のコンピューターはほぼ完全にフリーズ/応答しなくなりました。(注: ただし、これは小さな画像に対しては完全に機能します)
OS/ブラウザの問題かもしれませんが（Ubuntuの最新のGoogle Chrome）、私はそれを疑っています。そのファイル入力をフォーム内に配置し、データの base64-ing (つまり、ファイルの標準的な POSTing) を削除すると、約 1 秒で完了します。
6.5 分を 1 秒と比較してください。私は何か間違ったことをしなければなりません。ここで何が間違っていますか？代わりに何をすべきですか？私はWeb開発にかなり慣れていないので、少し暗闇の中にいます。base64 では 1.3 倍のサイズ増加が発生することは認識していますが、ここでのアップロード時間は明らかに 1.3 倍ではありません。私はconsole.loggingを少し行いました。
var base64 = reader.result;
約1秒かかります。したがって、ボトルネックはそこにあるとは思いません。ボトルネックはアップロードにあります。しかし、なぜ？base64 を使用すると、フォーム ファイルの入力が非表示のフォーム入力よりもはるかに高速なのはなぜですか?
長文の投稿で申し訳ありませんが、繰り返しになりますが、私は Web 開発に不慣れで、自分の問題をよく理解していないため、すべての情報を理解しつつ簡潔にするのは困難です。
ありがとう