Angular 5文件上载：未能在“HTMLInputElement”上设置“value”属性

我有一个在angular 5应用程序中上传文件的表单，由于我完全是从一段时间前编写的代码中复制的，所以我可以发誓它以前是有效的

以下是我的HTML代码：

文件： 请提供一张照片。 文件太大，无法上载。最大允许大小为500kb。 笔记 提交 取消 以下是fileUpload控件中使用的onFileChange方法：

onFileChange$事件 { 如果$event.target.files.length>0 { 让ftu:File=null； ftu=$event.target.files[0]； this.form.controls['content'].setValueftu； this.model.content=$event.target.files[0]； } } 下面是我编写和使用的自定义验证器的代码：

从'@angular/forms'导入{FormControl}； 导出类sekanirootimagevalidator { 静态大小OBIGCONTROL:FormControl { if！control.value { 返回{noFile:true} } else if控件。值[0]。大小>505000 { 返回{fileTooBig:true} } 返回null； } } 现在的问题是，只要我在输入控件中选择一个文件，我就会在控制台中收到以下错误消息：

错误DOMEException:未能在上设置“值”属性 “HTMLInputElement”：此输入元素接受文件名，该文件名可能 只能以编程方式设置为空字符串

这段代码以前已经运行过，所以我甚至不知道从哪里开始。感谢您的帮助

---

注意：这里有一个指向工作答案的链接：

就像错误所说的那样，您只能将空字符串设置为文件输入值以清除选择。否则可能会带来安全风险。我无法想象这段代码是如何工作的。也许在一些非标准的坏浏览器中

如果您只是删除了行，那么代码不应该工作吗？为什么您需要为输入设置与它已有的相同的值呢

---

编辑：似乎需要自定义ValueAccessor来验证文件输入。另一个答案中的解决方案：

不要将输入属性的值设置为所选文件。相反，只需将文件内容设置为一个变量，并分别附加到请求对象。

---

对于文件输入，只需将even.target.value指定为输入值，以便用户看到所选的实际文件。

在我的示例中，我刚刚删除了formControlName：

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

---

首先，您应该从元素中删除formControlName，该元素的类型为file， 因为它得到的是字符串 然后在ts文件中，您应该添加以下内容

if (event.target.files && event.target.files.length > 0) {
  const file = (event.target.files[0] as File);
  this.yourForm.get('image').setValue(file);
  console.log(this.yourForm.get('image').value);
}

---

通过为文件提供2个输入来实现这一点。我是这样做的：

  this.quickForm = this.formBuilder.group({
      fileSource: ['', Validators.required],
      fileName: '',
    })

HTML

---

因为我想对输入使用自定义验证器。验证器将附加到表单控件对象，否则验证器如何知道输入控件的值才能进行验证？您不需要手动设置输入值，验证器才能工作..谷歌搜索了一下，似乎不支持文件输入。您至少需要添加一个自定义ValueAccessor。这个答案可能会有帮助：我想知道为什么formcontrolname不能继续使用它？如果您在它上面有formcontrolname，并且您尝试以编程方式设置该值，则会出现上述错误。所以，如果您的文件输入在FormGroup中需要验证器，并且您尝试测试文件上载，您将失败，因为无法设置值，并且您无法设置它。从元素中删除formControlName解决了我的问题。谢谢

  this.quickForm = this.formBuilder.group({
      fileSource: ['', Validators.required],
      fileName: '',
    })

<input type="file" formControlName='fileSource' (change)="onFileSelected($event)"/>

  onFileSelected(event) {
    if(event.target.files.length > 0) 
     {
       this.quickForm.patchValue({
          fileName: event.target.files[0],
       })
     }
  }

submit(){
    const formData = new FormData();
    formData.append('file', this.myForm.get('fileName').value);
   // formData.append('file', this.myForm.get('anotherInput').value);
   
    this.http.post('http://localhost:8001/upload.php', formData)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }