错误TypeError:无法读取FileReader.reader.onload

时间:2019-03-21 07:24:28

标签: node.js angular typescript

当我尝试发布图片时,它会抛出错误:

  

错误TypeError:无法读取位于以下位置的未定义属性'0'   FileReader.reader.onload

我被称为在ts文件中上传图片(change)=“ preview($ event,j,i)”的方法方法,当我调用preivew()方法时出现错误

HTML代码

<div *ngFor="let ill of illustrations; let j = index">
  <div *ngIf="j === k">
    <div class="illustration" *ngFor="let illus of ill; let i = index">
      <span style="font-size:20px; font-weight: bold">{{i+1}}. </span>
      <input type="file" style="display:none" #w accept="image/*" (change)="preview($event, j, i)">
      <mat-form-field>
        <input type="text" [(ngModel)]="illustrations[j][i].title" matInput placeholder="Add an Illustration of your article with title & image"
          style="font-size: 20px;font-weight: bold;" required>
        <button matTooltip="Select Illustration Image" matSuffix style="min-width:50px" (click)="w.click()"
          mat-button color="accent">
          <i class="material-icons">insert_photo</i>
        </button>
      </mat-form-field>
    </div>
  </div>
</div>

TypeScript:

preview(event, j, i) {
  debugger;
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.illustrations[j][i].imagePath = event.target.result;
      //Upload Image here and apply the path to the this.illustrations[j][i].imagePath

      this.accountService.sendFile(event.target.files[0], localStorage.getItem('userId'), localStorage.getItem('articleId'), 'Illustrations').subscribe(
        response => {
            alert(response);
            this.illustrations[j][i].imagePath = JSON.parse(response).path;
        },
        err => {
            alert(err.message);
        }
      );
    }

    reader.readAsDataURL(event.target.files[0]);
    // alert(this.illustrations[j][i].title);
  }
}

0 个答案:

没有答案