Question

Angular - 清除文件输入

2018-09-14

25235

angular typescript

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

组件 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 。但是，当我更改此设置时，typescript 会抱怨我在 prepareSave 方法中的行：

const ImageFile: File = this.userPhoto;

[ts] 类型“ElementRef”不能分配给类型“File”。类型“ElementRef”中缺少属性“lastModified”。

如何将 ElementRef 用于我的 viewChild 以及稍后将照片分配给 File ？

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

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

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

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 = "";
  
  }


}