代码之家 › 专栏 › 技术社区 › Madpop

无法使用angular5在输入中显示文件上载详细信息

typescript angular javascript

-1

Madpop · 技术社区 · 6 年前

.ts code:
import { Component } from '@angular/core';
import { FileUploader, FileUploadModule, FileItem } from 'ng2-file-upload';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  file_type='';
  file_size='';
  file_name='';
   private URL: string = 'https://evening-anchorage-3159.herokuapp.com/api/';
  public uploader: FileUploader = new FileUploader({ url: this.URL });
  //const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
  //public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;

  public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e:any):void {
    this.hasAnotherDropZoneOver = e;
  }

  constructor(){

    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {

       console.log(item);
       for(var i=0;i <= item.FileItem.length;i++){
         console.log(i);

       }
      // this.file_name =item['file']['name'];
      // this.file_type = item['file']['type'];
      // this.file_size = item['file']['size'];
    }


  }
}

**.html code**


<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href> File Upload</a>
        </div>
    </div>

    <div class="row">

        <div class="col-md-3">

            <h3>Select files</h3>

            <div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="well my-drop-zone">
                Base drop zone
            </div>
        </div>
    </div>

    <div class="col-md-9" style="margin-bottom: 40px">

        <h3>Upload queue</h3>
        <p>Queue length: {{ uploader?.queue?.length }}</p>
        <input type="text" [(ngModel)]="file_type">
        <input type="text" [(ngModel)]="file_name">
        <input type="text" [(ngModel)]="file_size">

        <table class="table">
            <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th>Size</th>
                    <th>Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of uploader.queue">
                    <td><strong>{{ item?.file?.name }}</strong></td>
                    <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                    <td *ngIf="uploader.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-success btn-xs" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                        <span class="glyphicon glyphicon-upload"></span> Upload
                    </button>
                        <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isUploading">
                        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                    </button>
                        <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <div>
            <div>
                Queue progress:
                <div class="progress" style="">
                    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                </div>
            </div>
            <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                <span class="glyphicon glyphicon-upload"></span> Upload all
            </button>
            <button type="button" class="btn btn-warning btn-s" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
            </button>
            <button type="button" class="btn btn-danger btn-s" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                <span class="glyphicon glyphicon-trash"></span> Remove all
            </button>
        </div>

    </div>





</div>

https://stackblitz.com/edit/angular-mn3dvh

2 回复 | 直到 6 年前

Asanka 6 年前

stackblitz

  file_type : Set<string> = new Set<string>();
  file_size : Set<number> = new Set<number>();
  file_name : Set<string> = new Set<string>();

 public dropped(event:any) {

    for (var key = 0; key < event.length; key++) {
    let file = event[key];
      this.file_name.add(file.name)
      this.file_size.add(file.size)
      this.file_type.add(file.type)
}

        <input type="text" [ngModel]="file_type.size>1?'*':file_type.values().next().value">
        <input type="text" [ngModel]="file_name.size>1?'*':file_name.values().next().value">
        <input type="text" [ngModel]="file_size.size>1?'*':file_size.values().next().value">

Vaibhav 6 年前

 this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {

   console.log(item); 
   let arr:FileItem[]=[];
   arr.push(item)
  for (let i = 0; i <= arr.length; i++) {
    if (arr.length > 1) {
      console.log(i);
      console.log('type is', arr[0].file.type);
      let type: string[] = [];
      type.push(arr[0].file.type);
      let temp: number = i;
      if (i != temp && arr[0].file.type) {
         //do something 
      }
    }
    else{          
      console.log('type is', arr[0].file.type);
    }
  }
  // this.file_name =item['file']['name'];
  // this.file_type = item['file']['type'];
  // this.file_size = item['file']['size'];
}

您可以在数组中推送file对象,然后访问具有file type属性的属性文件的第0个索引,在另一个数组中推送这些类型检查该数组是否有重复项进行处理,如果只有一个上载的文件,则直接访问 array[0].file.type 归还财产