Question

我有一个组件，允许用户填写一些字段以及选择个人资料图片。提交表单后，我试图清除它，以便他们可以添加另一个条目。

组件HTML：

<input type="file" #userPhoto name="userPhoto" id="userPhoto" (change)="onFileChange($event)" />

组件TS：

@ViewChild('userPhoto') userPhoto: any;

...

private prepareSave(value): any {
 const Image = this.userPhoto.nativeElement;
 if (Image.files && Image.files[0]) {
   this.userPhoto = Image.files[0];
 }
 const ImageFile: File = this.userPhoto;
 const formData: FormData = new FormData();
 formData.append('ParentUserID', value.parentUserID);
 formData.append('FirstName', value.firstName);
 formData.append('LastName', value.lastName);
 formData.append('Age', value.age);
 formData.append('Photo', ImageFile, ImageFile.name);
 return formData;
}

...

<Submit Form>
clearSelectedPhoto() {
  this.userPhoto.nativeElement.value = null;
}

现在，我认为问题是我的viewChild使用any而不是ElementRef。但是，当我更改此设置时，打字稿会在prepareSave方法中抱怨我的话：

const ImageFile: File = this.userPhoto;

[ts] 类型“ ElementRef”不可分配给“文件”类型。类型'ElementRef'中缺少属性'lastModified'。

如何为ElementRef使用viewChild以及稍后将照片分配给File？

我试图用我的reset方法强制转换它，但看起来也不起作用。

   clearSelectedPhoto() {
     (<ElementRef>this.userPhoto).nativeElement.value = null;
    }

抛出：ERROR错误：未捕获（按承诺）：TypeError：无法设置未定义的属性“值”

Answer 1

您必须从更改事件中获取文件。

组件HTML：

<input #userPhoto type="file" (change)="fileChange($event)"/>

组件TS：

@ViewChild('userPhoto') userPhoto: ElementRef;
private _file: File;

private prepareSave(value): FormData {
    const formData: FormData = new FormData();
    formData.append('ParentUserID', value.parentUserID);
    formData.append('FirstName', value.firstName);
    formData.append('LastName', value.lastName);
    formData.append('Age', value.age);
    formData.append('Photo', this.file, this.file.name);
    return formData;
}


fileChange(event) {
    this.file = event.srcElement.files[0];
}
clearSelectedPhoto() {
    this.userPhoto.nativeElement.value = null;
}

使用TS时，应尽可能在任何地方声明类型，这样可以避免很多错误。不要从函数中返回any。即使您的函数返回了几种类型的指针，例如，您在函数声明中指向getFile(): File | string。

请勿使用相同的变量：

@ViewChild('userPhoto') userPhoto: any;
...
    if (Image.files && Image.files[0]) {
       this.userPhoto = Image.files[0];
    }

在代码中，您用文件覆盖了指向输入元素的指针，然后当您尝试清除其值this.userPhoto.nativeElement.value = null;时，您实际上已写入Image.files[0].value = null;。

Answer 2

您需要使用@ViewChild获取元素，然后将其清空以删除文件


 #component.html
<input type="file" #userPhoto name="userPhoto" id="userPhoto" (change)="onFileChange($event)" />


 #component.ts{
  @ViewChild('userPhoto')
  myInputVariable: ElementRef;

  onFileChange(event){

   // when you done with process - clear the file
   this.myInputVariable.nativeElement.value = "";
  
  }


}

角度-清除文件输入

2 个答案: