前提

该博文使用ng2-file-upload组件实现。

使用步骤

1.在module中添加引用

import { FileUploadModule } from 'ng2-file-upload';

@NgModule({
  imports: [
    FileUploadModule,]})

2.在component.ts中

①添加引用

import { FileUploader } from 'ng2-file-upload';

  public imgUploaders: FileUploader = new FileUploader({
    
  });

 onUploadFile() {
    let obj = this;
    let options = {
      url: this.url+this.Id,method: "POST",allowedFileType: ["image"]
    }
    this.imgUploaders.setOptions(options);
   //上传所有
    this.imgUploaders.uploadAll();
    this.imgUploaders.onSuccessItem=function(item,response){
       //上传成功的回调函数
        obj.imgUploaders.clearQueue();
      }
     
    }
    this.imgUploaders.onErrorItem=function(item,response){
      //上传失败的回调函数
    }   
  }

3.在html中

<!-- 批量上传图片 -->
  <p-dialog header="上传图片"  [(visible)]="imgDisplay" width="600" modal="modal" [responsive]="true">

    <div style="text-align:center;display:none">
      <input #filepath1 type="file" name="filePath" value="选择文件" style="display:none" ng2FileSelect 
        [uploader]="imgUploaders"   multiple>
    </div>
    <div>
      <button class="inscription-select form-control" type="button" pButton  label="选择文件"></button>
    </div>
    <div class="col-md-9 image-details" style="margin-bottom: 40px">
      <div class="image-table" *ngIf="imgUploaders?.queue?.length>0">
      <table class="details-table">
        <thead>
          <tr>
            <th >图片名称</th>
            <th>大小</th>
            <th>进度</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of imgUploaders.queue">
            <td>
              <strong>{{ item?.file?.name }}</strong>
            </td>
            <td *ngIf="imgUploaders.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
            <td *ngIf="imgUploaders.options.isHTML5">
              <div class="progress" style="margin-bottom: 0;">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
              </div>
            </td>
            <td class="text-center">
              <span *ngIf="item.isSuccess">
                <i class="glyphicon glyphicon-ok"></i>
              </span>
              <span *ngIf="item.isCancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
              </span>
              <span *ngIf="item.isError">
                <i class="glyphicon glyphicon-remove"></i>
              </span>
            </td>
            <td nowrap>
              <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                <span class="glyphicon glyphicon-trash"></span> 删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
      <div class="btn-image-table" *ngIf="imgUploaders?.queue?.length>0">
          
          <button type="button" class="btn btn-success btn-s"
                  (click)="onUploadImgs()" [disabled]="!imgUploaders.getNotUploadedItems().length">
              <span class="glyphicon glyphicon-upload"></span> 上传所有
          </button>
          <button type="button" class="btn btn-warning btn-s"
                  (click)="imgUploaders.cancelAll()" [disabled]="!imgUploaders.isUploading">
              <span class="glyphicon glyphicon-ban-circle"></span> 取消所有
          </button>
          <button type="button" class="btn btn-danger btn-s"
                  (click)="imgUploaders.clearQueue()" [disabled]="!imgUploaders.queue.length">
              <span class="glyphicon glyphicon-trash"></span> 移除所有
          </button>
          <div>
            上传进度:
            <div class="progress" style="">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': imgUploaders.progress + '%' }"></div>
            </div>
        </div>
      </div>  
    </div>
    <p-footer>
      <!-- <button type="button" pButton icon="fa-check" (click)="onUploadImgs()" label="上传"></button> -->
      <button type="button" pButton icon="fa-close" (click)="onCancel()" label="关闭"></button>
    </p-footer>
  </p-dialog>

效果图

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!