未能在“HTMLInputElement”上设置“值”属性答案

【问题标题】：Failed to set the 'value' property on 'HTMLInputElement'未能在“HTMLInputElement”上设置“值”属性
【发布时间】：2018-05-14 16:49:40
【问题描述】：

当我尝试将我的文件 blob 分配给 File 对象时，它给了我以下错误：

core.js:1448 ERROR 错误：未捕获（承诺）：InvalidStateError：未能在“HTMLInputElement”上设置“值”属性：此输入 element 接受一个文件名，该文件名只能以编程方式设置为空字符串。错误：无法设置“值”属性 'HTMLInputElement'：这个输入元素接受一个文件名，它可以只能以编程方式设置为空字符串。

当我console.log() 进入其中时，我检查了内容，它确实给了我文件的内容。为什么我尝试将其分配给 examen_bestand 时出现错误？

HTML：

<input type="file" [(ngModel)]="examen_bestand" name="examen_bestand" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" (change)="fileChanged($event)">

TS：

export class StudentUploadComponent implements OnInit {
  @Input() examensStudent: Examen[] = [];
  examen_id: number;
  examen_bestand: any;

  constructor(private serv: ExamService) { }

  onSubmit(form) {
    console.log(form.values);
  }

  fileChanged(e) {
    const reader = new FileReader();
    reader.onload = () => {
      this.examen_bestand = reader.result;
    };
    reader.readAsText(e.target.files[0]);
  }

  ngOnInit() {
    this.serv.getExams().subscribe(data => this.examensStudent = data);
  }

}

【问题讨论】：

是输入文件还是加载组件时出错？
当我选择文件时发生。所以在“fileChanged()”函数中。更准确地说，我很确定这是this.examen_bestand = reader.result;
您正在将文件输入设置为您选择的文件内容的结果。我不确定你想用 [(ngModel)] 完成什么，但你是对的。当您将examen_bestand 设置为文件内容时会发生这种情况。
哦，那你不需要 ngModel。
我真是太愚蠢了，这确实是问题所在。我忘记了我正在通过（更改）检索数据。您介意将其发布为答案以便我接受吗？

标签： angular typescript

【解决方案1】：

我遇到了这个错误，刚刚解决了。至少对我来说，这是因为在我的输入中，我在输入字段中有一个“值”，设置为 this.state.image，如下所示：

          <label htmlFor='image'>
                    Image
                    <input 
                        type='file' 
                        id='file' 
                        name="file"
                        placeholder="Upload an Image" 
                        required 
                        value={this.state.image}
                        onChange={this.uploadFile}
                        />
                </label>

在我删除了值={this.state.image}

它开始工作了。

希望这会有所帮助。

【讨论】：

这里也一样。你是什么原因造成的？

【解决方案2】：

删除 ngModel。这是您目前可能不需要的stackblitz。 :)

【讨论】：

你的 stackblitz 是空的，没有实现
我猜 stackblitz 在过去两年半里做了一些清理工作。我的道歉。
您的链接中没有解决方案

【解决方案3】：

如果您无法访问@wolghoundjesse stackblitz，您必须从input 中删除[(ngModel)]="examen_bestand"，并从TS 中的fileChanged($event) 中获取文件名：

fileChanged(file){
     this.examen_bestand = file.target.files[0].name;
     ... 
}

https://github.com/angular/angular/issues/6074#issuecomment-347187761

【讨论】：