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 ='';' 订阅方法，因此只有在成功的情况下，您才能删除它们，并且还需要创建错误函数，然后在发生错误时将其删除。

基本上，您在这里所做的是仅在文件上传或出现错误后才删除它们，因此您不再需要它们。