无法在 Angular 17.0.7 中上传文件

Question

当我尝试将文件发送到后端服务器时，我的数据变空了

我正在使用 FormData 并使用追加方法将数据插入 FormData ，但是当我控制台并看到我得到空对象时。

html代码

<input (change)="handleFileUpload($event)" id="uploadFile" type="file" style="display: none" />

ts

handleFileUpload(event: any) {
const file = event.target.files[0];
this.selectedFile = file;
this.fileName = file.name;

const selectedFileSize = file.size / 1024;

if (selectedFileSize < 1024) {
  this.fileSize = `${selectedFileSize.toFixed(2)} KB`;
} else {
  this.fileSize = `${(selectedFileSize / 1024).toFixed(2)} MB`;
}
}



sendUploadedFile() {
this.fileUploadApiStatus = this.apiStatusConstants.inProgress;

const formData: FormData = new FormData();
formData.append('file_name', this.fileName);
formData.append('file', this.selectedFile);
formData.append('size', this.fileSize);
console.log(formData);

this.apiServices.uploadFile(formDataO).subscribe({
    next: (response: any) => {
      // console.log('Response from file upload', response);
      this.fileUploadApiStatus = this.apiStatusConstants.success;
    },

    error: (err: any) => {
      this.fileUploadApiStatus = this.apiStatusConstants.failure;
    },
  });
}

Answer 1

看到空物体很好。尝试更具体一些

console.log(formData.get('file'));

你应该能看到

File {}

这是一个示例https://stackblitz.com/edit/stackblitz-starters-wrdqmi?file=src%2Fmain.ts