无法在“FileReader”上执行“readAsText”：参数 1 不是“Blob”类型

Question

我正在尝试以角度读取用户上传的 xml 文件。以下是我的代码：

组件.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

我今天遇到了上传问题。我找到了这个链接。此示例包含您遇到的问题。我为我的项目编辑了 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);
    }

  }

}

Answer 2

不是将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 3

在“fileReader.readAsText(this.uploadXML)”周围尝试这样的事情

if (typeof this.uploadXML === "object") {
  fileReader.readAsText(this.uploadXML);
}