ng2-fileuoload - Angular 2とPost to Server URLからアップロードする方法

Question

私はファイルフロントエンドをアップロードするためにng2-file-uploadを使用しています。 HTMLでは、私のTSファイルで

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

、 私は、変更イベントでアップロードされたファイルを取得し、私は今、私はURLに投稿する方法を知りたい、URLを持っています。

public uploader:FileUploader = new FileUploader({url: URL}); 

指定されたURLに投稿しますか？私のURLはhttp://localhost:8080/testだと言いますが、ファイルが正常に届いていることを確認するにはどうすればいいですか？ File Upload In Angular 2?これは私の必要な仕事をします。しかし、私はng2-file-uploadで試してみたいです。誰かが私にそれを手伝うことができますか？

ここで私はカスタマイズされたボタンを使用しています。 1つのボタンをクリックするだけでファイルの選択とファイルのアップロードが行われなければなりません。 tsファイルでuploadメソッドを呼び出すオプションがあります。事前にお礼します。

Answer 1

すでに実例があります。 http://valor-software.com/ng2-file-upload/

TSコード&もあり、作業ノードJSの作業コードです。

/*eslint-disable*/ 
var express = require('express'); 
var multer = require('multer'); 
var fs = require('fs'); 
var app = express(); 

var DIR = './uploads/'; 

var upload = multer({dest: DIR}); 

app.use(function (req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', 'http://valor-software.github.io'); 
    res.setHeader('Access-Control-Allow-Methods', 'POST'); 
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); 
    res.setHeader('Access-Control-Allow-Credentials', true); 
    next(); 
}); 

app.use(multer({ 
    dest: DIR, 
    rename: function (fieldname, filename) { 
    return filename + Date.now(); 
    }, 
    onFileUploadStart: function (file) { 
    console.log(file.originalname + ' is starting ...'); 
    }, 
    onFileUploadComplete: function (file) { 
    console.log(file.fieldname + ' uploaded to ' + file.path); 
    } 
})); 

app.get('/api', function (req, res) { 
    res.end('file catcher example'); 
}); 

app.post('/api', function (req, res) { 
    upload(req, res, function (err) { 
    if (err) { 
     return res.end(err.toString()); 
    } 

    res.end('File is uploaded'); 
    }); 
}); 

var PORT = process.env.PORT || 3000; 

app.listen(PORT, function() { 
    console.log('Working on port ' + PORT); 
}); 

タイプスクリプトで初期化されたファイルアップロードオブジェクトを使用するフロントエンドパートです。

あなたのタイスクリプトです。

public uploader:FileUploader = new FileUploader({url: URL}); 

我々はテンプレート&その事前に定義された方法で、アップローダを使用し、あなたの迅速な応答を

<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 
     <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>Upload queue</h3> 
     <p>Queue length: {{ 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>