如何添加自定義頁眉在NG2文件上傳

我與NG2文件上傳嘗試，問題是我不能設置自定義頭。到目前爲止，我已經做到了這一點如何添加自定義頁眉在NG2文件上傳

在上載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"}]** 
    }); 
}

在上載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>

但不幸的是，當我點擊上傳按鈕或全部上傳按鈕時（這是從開始的演示使用）我在請求中看不到請求標頭。

我使用NG2文件上傳1.2.0版本

任何想法？

來源

2017-03-02 vicmac

我已經花了一個星期了這些庫，我的需求是自定義頁眉和參數，但遠遠不能滿足它，所以我結束了我自己的庫文件上傳正確測試和易於使用試試看。

https://github.com/babarxm/ng-uploader

來源

2017-03-03 07:31:00

我認爲有路段中的錯字，即使我給它一個嘗試，謝謝！ – vicmac

域名不正確，現在我修好了。祝你好運:) –

謝謝你！無論如何，我已經試過了，會看到！ – vicmac

我做這個和它的工作就好了..能在我的MVC控制器提取foofoo：

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

來源

2017-04-13 18:06:16 NetBiz

這應該被標記爲答案。也可以這樣訪問：this.uploader.options.headers = [{name：'foofoo'，value：'passengerslivesmatter'}]; –

基本上，如果你需要在帖子標題承載Autentification

const uploader: FileUploader = new FileUploader({ 
    url: URL, 
    headers: [{ name: 'Autenfication', value: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1YTIzNDBkOWE0MDM5YTI2MGM1OWYzNTMiLCJleHAiOjE1MTUyMjc5NDcyMzV9.uVpwN9vrjpoKOzNN_DYOgonB1N46Pl' }] 
}) 

fileItem.withCredentials = false;

這工作正常。

來源

2017-12-23 16:07:29

您只需將您的令牌象下面這樣：

this.uploader = new FileUploader({ url: URL , authToken: "Bearer " + authService.getToken()});

來源

2018-01-05 23:13:38

如何添加自定義頁眉在NG2文件上傳

回答

相關問題