FormData追加文件角度

Question

我正在使用FormData將圖像發送到Laravel API。 當我使用此代碼時，它不起作用：

onChange(event: any) {
 const images = event.target.files;
 if (images.length <= 5) {
  Array.from(images).forEach(image => {
    console.log(image);
    const formData: FormData = new FormData();
    formData.append('image', image, image.name);

    console.log(formData);

    this.http.post('http://127.0.0.1:8000/api/web', formData).subscribe(data =>  {
      console.log(data);
    });
  });
 }
 event.target.value = '';
}

console.log(image); 我得到File(651565){}

console.log(formData); 我得到FormData {}

console.log(data); 我得到{}

因此，如果可以看到，第一個起作用，而第二個不再起作用。

有小費嗎？

Answer 1

如果將'onChange'函數附加到HTMLInputElement，請嘗試以下操作：

const images = (event.target as HTMLInputElement).files;

編輯后

我仔細研究了一下，看來這是問題所在：

event.target.value = '';

及其原因是因為在這里：

const images = (event.target as HTMLInputElement).files;

您將文件作為“引用類型”，因此，如果您像在此處那樣更改值，則：

event.target.value = '';

您刪除文件對象。

嘗試這樣做：

移動'event.target.value ='';' 訂閱方法，因此只有在成功的情況下，您才能刪除它們，並且還需要創建錯誤函數，然后在發生錯誤時將其刪除。

基本上，您在這里所做的是僅在文件上傳或出現錯誤后才刪除它們，因此您不再需要它們。