'HTMLInputElement'에서 'value' 속성을 설정하지 못했습니다.

'HTMLInputElement'에서 'value' 속성을 설정하지 못했습니다.

파일 BLOB를 파일 개체에 할당하려고 하면 다음 오류가 발생합니다.

core.js:1448 오류:잡히지 않음(약속):InvalidStateError: 'HTMLInputElement'에서 'value' 속성을 설정하지 못했습니다.이 입력 요소는 빈 문자열에만 프로그래밍 방식으로 설정할 수 있는 파일 이름을 허용합니다.오류: 'HTMLInputElement'에서 'value' 속성을 설정하지 못했습니다.이 입력 요소는 빈 문자열에만 프로그래밍 방식으로 설정할 수 있는 파일 이름을 허용합니다.

나는 내가 그 내용을 확인했을 때.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);
  }

}

이 오류가 발생하여 방금 해결되었습니다.적어도 저에게는 입력 필드에 다음과 같은 '값'이 설정되어 있었기 때문입니다.

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

value={this.state.image} 행을 제거한 후

그것이 작동하기 시작했습니다.

이게 도움이 되길 바랍니다.

ng 모델을 제거합니다.이 시점에서 필요하지 않을 수 있는 스택 블리츠가 있습니다.:)

@wunghound jesse stackblitz에 액세스할 수 없는 경우에는 다음을 제거해야 합니다.[(ngModel)]="examen_bestand"에서input그리고 파일 이름을 에서 가져옵니다.fileChanged($event)TS에서:

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

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

언급URL : https://stackoverflow.com/questions/50335321/failed-to-set-the-value-property-on-htmlinputelement