Angular批量上传图片

我会带着你远行 2022-06-04 09:16 310阅读 0赞

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan]

# 前提 #

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

# 使用步骤 #

##      1.在module中添加引用 ##

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

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

##     2.在component.ts中 ##

①添加引用

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

②新建一个FileUploader类型的对象:

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-close" (click)="onCancel()" label="关闭"></button>
        </p-footer>
      </p-dialog>

# 效果图 #

待添加,由这次的探索总结出:问题总有解决的办法,多尝试!

[http_www.captainbed.net_zhanghan]: http://www.captainbed.net/zhanghan