如何在ng2-file-upload中添加自定义标题

Question

我正在尝试使用ng2-file-upload,问题是我无法设置自定义标头.到目前为止,我已经做到了这一点

在upload-documents.component中

  import { Component } from '@angular/core';
  import { FileUploader,  Headers } from 'ng2-file-upload';

  @Component({
      moduleId: module.id,
      selector: 'sg-uploadcompnent',
      templateUrl: '../views/upload-documents.template.html'
  })

  export class UploadDocumentsComponent {
     public uploader: FileUploader = new FileUploader({
     url: "http://localhost:port/app/api/upload/",
     authToken: "Authorization",
     authTokenHeader: "Bearer mytoken871lkdk39829",
     isHTML5: true,
     **headers: [
         {name: "myCustomHeader", value:"some value"}]**
  });
}

在upload-documents.template.html中

    <style>
.my-drop-zone { border: dotted 3px lightgray; }
.nv-file-over { border: dotted 3px red; } /* Default class applied to    drop zones on over */
 .another-file-over-class { border: dotted 3px green; }

 html, body { height: 100%; }
 </style>

 <div class="container">

 <div class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href>The screen to upload files</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 ng2FileDrop
             [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
             (fileOver)="fileOverAnother($event)"
             [uploader]="uploader"
             class="well my-drop-zone">
            Another drop zone
        </div>

        Multiple Selection
        <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

        Single
        <input type="file" ng2FileSelect [uploader]="uploader" />
    </div>

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

        <h3>Files to upload</h3>
        <p>Total: {{ uploader?.queue?.length }}</p>

        <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>

但不幸的是,当我点击上传按钮或全部上传按钮时,(这是http://valor-software.com/ng2-file-upload/上的演示用途)我无法在请求中看到请求标头.

我正在使用ng2-file-upload 1.2.0版本

有任何想法吗？？

Answer 1

我这样做了它工作得很好..能够在我的MVC控制器中提取foofoo:

uploader: FileUploader = new FileUploader({
  url: URL,
  headers: [{ name: 'foofoo', value: 'passengerslivesmatter' }]
});

Answer 2

您可以在ng2-file-upload中添加身份验证令牌,如下所示:

  public uploader: FileUploader = new FileUploader({
    url: urlFileUpload,
    authToken: Your value//auth token.

  });

ng2-file-upload的authToken属性添加令牌.