Не удалось выполнить readAsText для FileReader: параметр 1 не относится к типу Blob

Question

Я пытаюсь прочитать загруженный пользователем файл xml в angular. Ниже мой код:

Component.ts:

convertFileToString(event){
    this.uploadXML=event.target.files[0];
    let fileReader = new FileReader();
    fileReader.onload = (event) =>{this.finalUploadedXML=fileReader.result as String}
    fileReader.readAsText(this.uploadXML);
    console.log("The contents are:")
    console.log(this.finalUploadedXML);
  }

index. html

<input type="file" id="uploadInput" (change)="convertFileToString($event)" hidden>

Но когда я запускаю этот код, он дает мне следующее ошибка:

Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'

Я также изменил readAsText(this.uploadXML) на readAsText(this.uploadXML.asInstanceOf[Blob]), но кажется, что asInstanceOf не является известным свойством типа файла. Поэтому я попытался изменить тип uploadXML с File на Blob, и ошибка все еще сохраняется. Что мне делать?

Answer 1

Вместо передачи event в качестве параметра функции convertFileToString(), передайте объект файла. Это потому, что эта функция в свою очередь вызывается другой функцией, которая обрабатывает событие change, которое запускается при загрузке файла. Итак, окончательный ответ:

convertFileToString(file){
    //this.uploadXML=event.target.files[0];

    let fileReader = new FileReader();
    fileReader.onload = (event) =>{

      this.finalUploadedXML=fileReader.result as String
      console.log((<FileReader>event.target).result);
    }
    fileReader.readAsText(file);
    console.log("The contents are:")
    console.log(this.finalUploadedXML);
}

Надеюсь, это поможет. Приветствия

Answer 2

Я столкнулся с проблемой загрузки сегодня. И я нашел эту ссылку. Этот пример содержит проблему, с которой вы столкнулись. И я отредактировал этот код для Angular для моего проекта. Это может вам помочь.

HTML Код

<form>

  <input type="hidden"
         id="MAX_FILE_SIZE"
         name="MAX_FILE_SIZE"
         value="300000" />

  <div>
    <label for="fileselect">Files to upload:</label>
    <input type="file"
           id="file-select"
           name="fileselect[]"
           multiple="multiple" />

    <div id="file-drag">{{ dragDropAreaText }}</div>
  </div>

</form>

Код стиля

#file-drag {
  font-weight: bold;
  text-align: center;
  padding: 1em 0;
  margin: 1em 0;
  color: #555;
  border: 2px dashed #555;
  border-radius: 7px;
  cursor: default;
}

#file-drag.hover {
  color: #f00;
  border-color: #f00;
  border-style: solid;
  box-shadow: inset 0 3px 4px #888;
}

img {
  max-width: 100%;
}

pre {
  width: 95%;
  height: 8em;
  font-family: monospace;
  font-size: 0.9em;
  padding: 1px 2px;
  margin: 0 0 1em auto;
  border: 1px inset #666;
  background-color: #eee;
  overflow: auto;
}

Машинописный код

export class UploadMediaComponent implements OnInit, AfterViewInit {

  constructor(
    private elementRef: ElementRef
  ) { }

  fileList: any[] = [];

  @Input() dragDropAreaText: string = 'Drag and drop files here';
  @Input() uploadButtonText: string = 'Browse File';

  @Output() mediaUploaded: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
  }

  ngAfterViewInit() {
    if (window.File && window.FileList && window.FileReader) {
      setTimeout(() => {
        this.setEvents();
      }, 2000);
    }
  }

  setEvents() {
    const fileDragElement = this.elementRef.nativeElement.querySelector('#file-drag');
    const fileSelectElement = this.elementRef.nativeElement.querySelector('#file-select');
    fileSelectElement.addEventListener('change', this.fileSelectHandler.bind(this));
    fileDragElement.addEventListener('dragover', this.fileDragHover.bind(this));
    fileDragElement.addEventListener('dragleave', this.fileDragHover.bind(this));
    fileDragElement.addEventListener('drop', this.fileSelectHandler.bind(this));
  }

  fileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
  }

  fileSelectHandler(e) {
    e.preventDefault();
    // cancel event and hover styling
    this.fileDragHover(e);
    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;
    console.log(files)
    // process all file objects
    for (var i = 0, file; file = files[i]; i++) {
      this.parseFile(file);
    }
  }

  parseFile(file) {
    console.log(file);
    // display an image
    if (file.type.indexOf("image") == 0) {
      var reader = new FileReader();
      reader.onload = (e) => {

        console.log(e);
        console.log(e.target.result);

        file.src = e.target.result;
        this.fileList.push(file);
        this.mediaUploaded.emit(this.fileList);
      }
      reader.readAsDataURL(file);
    }

    // display text
    if (file.type.indexOf("text") == 0) {
      var reader = new FileReader();
      reader.onload = function (e) {
        console.log(e);
      }
      reader.readAsText(file);
    }

  }

}