1. 上传多张图片
html
<ImagePicker[files]="files"[multiple]="multiple"[selectable]="files.length < 5"[accept]="'image/gif,image/jpeg,image/jpg,image/png'"(onChange)="fileChange($event)"(onImageChange)="ImageChange($event)"></ImagePicker>
ts
chengzjl: Mnjxchengzjl = new Mnjxchengzjl();files = [];multiple = false;ImageChange(params) {const {files, type, index} = params;this.files = files;}fileChange(params) {const {files, type, index} = params;this.files = files;this.chengzjl.zhaops = [];if (this.files.length > 0) {this.files.forEach(item => {this.chengzjl.zhaops.push(item.url);});}}
<div class="zhaop"><img *ngFor="let zhaop of item.zhaops" [src]="zhaop" alt=""></div>
2.上传单张照片
html
<div style="background: #ffffff" class="pt-2 pl-2"><div class="position-relative imgUpload"><div class="text-secondary border add" *ngIf="selectable">+</div><input type="file" name="file" accept="image/*" (change)="handleFiles($event)"><img [src]="imageUrl" alt=""></div><p class="text-secondary small pt-2" *ngIf="selectable">选填，可上传一张相关跟进图片</p></div>
ts
genzjl: Genzjl = new Genzjl();imageUrl;selectable = true;handleFiles(event) {const reader = new FileReader();reader.onload = (e) => {// @ts-ignorethis.imageUrl = e.target.result;this.selectable = false;this.genzjl.zhaop = this.imageUrl;};reader.readAsDataURL(event.target.files[0]);}
<div *ngIf="data.zhaop" class="genzjl"><img [src]="data.zhaop" alt=""></div>
3.上传头像
html
<div class="position-relative" style="height: 3rem;"><div class="add"><ListItem [arrow]="'horizontal'"[extra]="toux">头像<ng-template #toux><img [src]="xueyxxData.zhaop" alt=""></ng-template></ListItem></div><input type="file" name="file" accept="image/*" (change)="handleFiles($event)"></div>
ts
handleFiles(event) {const reader = new FileReader();reader.onload = (e) => {// @ts-ignorethis.xueyxxData.zhaop = e.target.result;};reader.readAsDataURL(event.target.files[0]);}
上传成功后 另一个页面放置！
<ion-avatar class="mt-1"><img [src]="xueyxxData.zhaop"></ion-avatar>
