upload-image-with-preview.component.html 1.45 KB
Newer Older
1 2 3 4 5 6 7 8 9 10
<div class="position-relative">
  <nz-upload class="p-image-uploader" [nzDisabled]="disableUpload"
             [nzShowUploadList]="false"
             nzAccept = "image/*"
             [nzAction]="uploadUrl"
             [nzData]="uploadData"
              (nzChange)="handleChange($event)">
             <!--[nzBeforeUpload]="customUpload">-->
    <div class="p-box d-flex align-items-center">
      <div class="p-upload-icon" *ngIf="!picUrl && !uploading">
liujiaxin's avatar
liujiaxin committed
11
        <i nz-icon nzType="cloud-upload" nzTheme="outline" [style.font-size]="iconSize + 'em'"></i>
12 13 14 15 16 17 18 19 20 21
        <div class="m-3"></div>
        <span>{{TIP}}</span>
        <!--<div class="mt-5 p-progress-bar" *ngIf="uploading">-->
        <!--<div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>-->
        <!--<div class="p-progress-value">{{progress}}%</div>-->
        <!--</div>-->
      </div>
      <div class="p-upload-progress-bg" *ngIf="uploading">
        <div class="i-bg" [style.width]="progress+'%'"></div>
        <div class="i-text">
liujiaxin's avatar
liujiaxin committed
22
          <fa-icon icon="cloud-upload-alt"></fa-icon>
23 24 25 26 27 28 29 30 31 32 33 34
          Uploading...
        </div>
      </div>
      <div class="p-preview" *ngIf="!uploading && picUrl "
           [style.background-image]="picUrl | backgroundImage ">
      </div>
    </div>
  </nz-upload>
  <div class="p-btn-delete" *ngIf="canDelete"
       nz-popconfirm nzTitle="Are you sure ?"
       (nzOnConfirm)="onDelete()"
  >
liujiaxin's avatar
liujiaxin committed
35
    <i nz-icon nzType="close" nzTheme="outline"></i>
36 37
  </div>
</div>