当我尝试发布图片时,它会抛出错误:
错误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);
}
}