javascript - 未能以 react 形式在 'value' 上设置 'HTMLInputElement' 属性

Question

以数据记录的形式，我上传一张图片，图片会被上传到一个服务器文件夹中，它的名字会存入数据库。

在这个编辑表单中，我从服务器获取文件名，我需要填写 <input type="file">以这种形式。使用 angular6 中的 react 形式。

这是我在 ts 文件中的代码:

   ngOnInit() {
  this.EditForm=this.fb.group({
  imageName:['',Validators.compose([Validators.required])]
})
this.SetForm(this.dat)
}

  SetForm(dt:data){
   this.EditForm.setValue({imageName:[dt.imageName]});
  }

在 html 中:

<form [formGroup]="EditForm">
    <input type="file" #file formControlName="imageName">
</form>

这是我的代码:stackblitz

我不知道这个问题，我有 3 天的时间遇到​​问题，请查看我的代码并更改它以解决此问题。

Answer 1

出于安全原因，可以通过编程方式仅将空字符串设置为文件输入值以清除选择。如果您设置一个值以使用类型文件输入，您将收到如下错误:

ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': 
This input element accepts a filename, which may only be programmatically set 
to the empty string.

作为现代浏览器的解决方法，DataTransfer 可用于更改文件输入值:

HTML(基于 stackblitz ):

<form [formGroup]="EditForm">
  <input id="my-input" type="file">
</form>

<button (click)="changeFileName()">Change File Name</button>

组件:

changeFileName() {
  const dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();
  dataTransfer.items.add(new File(['my-file'], 'new-file-name'));
  const inputElement: HTMLInputElement = document.getElementById('my-input') as HTMLInputElement

  inputElement.files = dataTransfer.files;
}