发表于: 2019-10-30 23:35:15
1 940
今天完成的事情:图片的上传,以及图片预显
明天计划的事情:
遇到的问题:
收获:
<div class="clearfix">
<nz-upload nzAction="/a/u/img/task" nzListType="picture-card" [(nzFileList)]="imgList.img" [nzShowButton]="imgList.img.length < 1"
[nzPreview]="handlePreview" (nzChange)='change($event)' >
<i nz-icon nzType="plus"></i>
<div class="ant-upload-text">Upload</div>
</nz-upload>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
(nzOnCancel)="previewVisible = false">
<ng-template #modalContent>
<img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
</ng-template>
</nz-modal>
</div>
这里nzAction就是图片的上传地址 nzListType是图片显示的样式 nzFileList是上传的图片 nzShowButton是限制上传图片的数量如果大于设定值,添加图片的按钮就消失了
(nzChange)是上传文件改变时的状态
[nzPreview]是点击文件链接或预览图标时的回调
评论