ng2-fileuoload - 如何从 Angular 2 上传并发布到服务器 URL

Question

我正在使用 ng2-file-upload 上传我的文件前端。在 html 中，

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

在我的 ts 文件中， 我在更改事件中获得了上传的文件并且我有 url，现在我想知道如何将它发布到 url。

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

它会将其发布到指定的 URL 吗？假设我的网址是http://localhost:8080/test，我如何检查我的文件是否已成功到达那里？ File Upload In Angular 2? 这将完成我所需的工作。但我想尝试使用 ng2-file-upload。有人可以帮我做吗。

我在这里使用自定义按钮。所以文件的选择和文件的上传必须在单击单个按钮时发生。那么有没有在ts文件中调用上传方法的选项。提前谢谢

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);
});

使用在 typescript 中初始化的 fileuploader 对象的前端部分。

在你的打字稿中。

  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>