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

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

FormData追加文件角度

1 个答案: