FormData 附加文件不起作用 Angular

Question

我正在使用 FormData 将图像发送到 PHP API。当我使用此代码时它不起作用：

HTML代码：

<input type="file" name="file" id="file" (change)="onFileSelected($event)" />
<button pButton (click)="onUpload()" label="UPLOAD"></button>

TS代码：

onFileSelected(event) {
    this.uploadFile = event.target.files[0];
    console.log(this.uploadFile);
}

onUpload() {
    const formData = new FormData();
    formData.append('myfile', this.uploadFile, this.uploadFile.name);
    console.log(formData);
}

当 console.log(this.uploadFile) 我得到：

和console.log(formData)我得到：

Answer 1

您的代码没有问题。尝试 console.log formdata 总是会给出一个空对象。

要显示您的文件数据，请将您的 console.log 更改为

console.log(formdata.getAll('myfile'));

以上函数将 return 一个包含文件对象 blob 的数组。

您还可以参考 MDN documentation 了解所有其他 formData 函数

FormData 附加文件不起作用 Angular

FormData append File does not work Angular

angular

form-data