net::ERR_INCOMPLETE_CHUNKED_ENCODING

というエラーにはまった

このエラーはブラウザ上には表示される consoleログにでるログです

経緯

ファイルをアップするプログラムをつくりました

ドラッグアンドドロップでアップする機能なのですが ファイル合計のバイトが180～200Mを超えたあたりで

net::ERR_INCOMPLETE_CHUNKED_ENCODING

というエラーがでます・・・ 質が悪いのはサーバーのログは200でした

htaccessファイルにHTTP 1.0を強制して問題を解決できました： SetEnv downgrade-1.0 これは問題を取り除く。しかし、HTTP 1.1をHTTP 1.1に強制することは適切な解決策ではありません。 https://codeday.me/jp/qa/20181208/59946.htmlより引用

と書いてあったが自分の環境では成功しなかった

アンチウイルスのリアルタイム保護を無効にすることで成功しました http://thisinterestsme.com/err_incomplete_chunked_encoding/ より引用

アンチウイルスをオフにすることは会社の方針的にできない

どうあがいてもこのエラーが解消されなかったので
ドラッグアンドドロップされたファイル郡を分割して送信するという事をおこなった

単純な同期処理から非同期処理の変更なのではまった

はまった内容

javascriptのエラーがわかりにくい

javascriptのエラーがおきると単純な画像表示されてしまう 必要な部分をとってevent.preventDefault()した

  async function onUpload_Drop(event){  
        var fd = event.dataTransfer.files;//eventに必要な部分だ取得する
        event.preventDefault();//eventの破棄

event.dataTransfer.filesにはsortのメソッドがない

今までは受けた側でソート処理をしていたが、送信前にソートしないといけなかった

だがドラッグアンドドロップしたイベントのfilesは配列なんだけど sortのメソッドがなかった
どうしてないのかわからないので
一旦配列に突っ込んでソートした添字を保存するようにした

var fd = event.dataTransfer.files;
var fdsortdatas = [];
for (var i=0; i< fd.length; i++) {
    //console.log(fd[i].name);
    fdsortdatas.push({"soeji": i, "name": fd[i].name});
}
console.log(fdsortdatas);
fdsortdatas.sort(function(a,b){
    if(a.name<b.name) return -1;
    if(a.name > name) return 1;
    return 0;
});
console.log(fdsortdatas);

ローディングの画像が表示されない

自分でも悲しいがファイルアップ中にローディングの gifを出すのが全然できなくてawait をいれて無理やり表示させた これが正解のかわからない

//↓すぐに反映されない
document.getElementById('uploadform').style.display="none";
document.getElementById('loading').style.display="block";
//0.5秒待つ(style反映のため)
const a = await timewaitResolve(1);

//style反映のためにsetTimeoutで待つ
function timewaitResolve(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(value);
        }, 500);
    })
}

感想

非同期処理に作り変えはめんどくさい。 同期処理の方が作りは楽だね・・・処理時間は非同期処理なんだけど・・・