文件未在事件Target上退出

Question

我第一次从事一个角度项目，该项目从产品中收集数据。虽然文件中的一切都很完美，但我在上传图像的html文件中遇到了错误。我收到这个错误类型"EventTarget"上不存在属性"files">

这是html文件

<div class="row mb-3">
<label for="Product Image" class="col-sm-2 col-form-label">Product Image:</label>
<div class="form-group">
<input type="file" id="photo" name="photo" (change)="handleFileInput($event.target.files)">
</div>
</div>

这是我的.ts文件

export class AddProductComponent implements OnInit {
model:any={}
fileToUpload: File = null;
handleFileInput(files:FileList){
this.fileToUpload=files.item(0);
console.log(this.fileToUpload);
const formData: FormData = new FormData();
formData.append('Image', this.fileToUpload);
this.http.post('http://localhost:3000/upload',formData).subscribe((res)=>{
console.log(res);
});
}

有人能帮我吗…

Answer 1

不要将files作为参数传递，而是传递整个$event：

<div class="row mb-3">
<label for="Product Image" class="col-sm-2 col-form-label">Product Image:</label>
<div class="form-group">
<input type="file" id="photo" name="photo" (change)="handleFileInput($event)">
</div>
</div>
handleFileInput(event){
this.fileToUpload=event.target.files[0];
console.log(this.fileToUpload);
const formData: FormData = new FormData();
formData.append('Image', this.fileToUpload);

this.http.post('http://localhost:3000/upload',formData).subscribe((res)=>{
console.log(res);
});