Question

我以数据记录的形式上传图片，该图片将上传到服务器文件夹，并且其名称将存储在数据库中。

在此编辑表单中，我从服务器获取文件名，并且需要在此表单中填写<input type="file">。在angular6中使用反应形式。

这是我在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;
}

Answer 2

这对我有用；

changeFileName() {
  const inputElement: HTMLInputElement = document.getElementById('my-input') as HTMLInputElement
  inputElement.files = null;
}

Answer 3

删除formControlName =“ image”并将其替换为（change）=“ onChangeImage（）”

Answer 4

您可以使用以下技巧重命名图像文件：

在component.html上，添加事件监听器以监听change：

<input type="file" (change)="onFileChange($event)" #file formControlName="imageName">

在您的component.ts上，这将使用更新后的文件名创建一个新文件

onFileChange(event) {
  //console.log(event.target.files[0].name)
  var blob = event.target.files[0].slice(0, event.target.files[0].size, 'image/png'); 

  const newFile = new File([blob], this.dat.imageName, {type: 'image/png'})
  //console.log(newFile)
}

这将保留input上的原始文件名，但是您可以在newFile / post请求中使用put，以将其发送到后端。

Answer 5

对于使用 ReactJs 的用户，请从文件输入控件中删除 value 字段以解决问题。

无法以反应形式在“ HTMLInputElement”上设置“ value”属性

5 个答案: