NG2-File-Upload上传多张图片

时间:2019-10-17 14:34:52

标签: angular image typescript

我要上传多张图片,并且该图片显示在视图中。

我有:

 public filePreviewPath: SafeUrl[]=[];

public uploader: FileUploader = new FileUploader({
    isHTML5: true
  });

我的构造函数:

constructor(private sanitizer: DomSanitizer, private fb: FormBuilder, private modalService: BsModalService,
    public modalRef: BsModalRef, private adminService: AdminSerivice, private dataStorageService: ProductService) {
    this.uploader.onAfterAddingFile = (fileItem) => {
      this.filePreviewPath.push(this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(fileItem._file)))) ;
    }

然后我要预设我的上传图片:

<div *ngFor="let img  of filePreviewPath  ; let indexCategory= index">
              <img class="op-product-thumb"
              [src]="img"
              *ngIf="img"/>
         <span class="op-icon op-close bg-danger"
                 (click)="item.remove()"
                 (click)="resetForm()">
         </span>
          </div>

我有这样的看法: enter image description here

当我从上传输入中添加新图片时,所有图像都集中在一个视图中。enter image description here

0 个答案:

没有答案