複数のファイルをアップロードできません

Question

私は、ユーザーが5種類の画像をアップロードすることができるアプリの一部を持っています。画像がアップロードされると、小さなサムネイルが表示されます。

私は1つの画像をアップロードするので、すべて正常に動作します。

複数の画像をアップロードしようとすると、3つすべて一緒に座って、3つの等しいサムネイルを示す3つの画像をアップロードしてしまいます...そして、私は狂っています。

HTML：：

<input id="pics" type="file" accept="image/*" class="upload" data-imageid="" data-imageurl="" data-callback="displayPics" data-image-type="pics" multiple /> 

JS：

const fileInputs = document.querySelectorAll('input[type="file"]'); 

[].slice.call(fileInputs).forEach(fileInput => { 
    fileInput.addEventListener('change',() => { 
     uploadFile(
      fileInput, 
      fileInput.getAttribute('data-callback') 
     ); 
    }); 
}); 

unction uploadFile(input, callback) { 
    let formData = new FormData(); 

    Object.keys(input.files).forEach(current => { 
     formData.append('file', input.files[current]); 
     fetchAPI({ 
      target: 'pics/', 
      method: 'POST', 
      body: formData 
     }) 
     .then(data => { 
      if (callback !== undefined) { 
       window[callback](data.response); 
      } 
     }, err => { 
      // err... 
     }); 
    }); 
} 

は、私がここで間違っているかを知ることができます。ここ

は、この部分を扱うコードのですか？ありがとう

Answer 1

fetch()呼び出しにURLが設定されていません。 "target"は、fetch()に渡されたオブジェクトの有効なオプションプロパティではありません。

また、Response.json()を呼び出して、ResponseのJavaScriptオブジェクト表現を取得することもありません。

質問のコードは、1つのリクエストではなく、Fileオブジェクトごとにリクエストします。

function uploadFile(input, callback) { 
    let formData = new FormData(); 
    for (let file of input.files) { 
     // or set property to `file[N]` 
     // "file["+ Array.from(formData.keys()).length +"]" 
     formData.append("file", file) 
    } 
    fetchAPI('pics/', { 
     method: 'POST', 
     body: formData 
    }) 
    .then(response => response.json()) 
    .then(data => { 
     if (callback !== undefined) { 
     window[callback](data.response); 
     } 
    }, err => { 
      // err... 
    }) 
}