無法上傳多個文件

Question

我有一小部分應用程序允許用戶上傳5張不同的圖片，只要圖片上傳完畢，它會顯示一個縮略圖。

由於我上傳單個圖像一切正常。

只要我嘗試上傳多張圖片，讓我們坐在一起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對象表示形式。

Question中的代碼爲每個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... 
    }) 
}