upload-image-with-preview.component.html 1.45 KB
Newer Older
范雪寒's avatar
范雪寒 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<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">
        <i nz-icon nzType="cloud-upload" nzTheme="outline" [style.font-size]="iconSize + 'em'"></i>
        <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">
          <fa-icon icon="cloud-upload-alt"></fa-icon>
          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()"
  >
    <i nz-icon nzType="close" nzTheme="outline"></i>
  </div>
</div>