如何使用angular 2上传文件? [英] How to upload file using angular 2?

问题描述

我需要使用angular 2上传文件，我在客户端使用了它，在服务器端使用了Web Api.如何使用这种组合来实现

I need to upload file using angular 2,I used it at client side,And I used Web Api At server side.How can i use this combination to implement

推荐答案

我已成功使用Angular2和ASP.NET Core上传文件.

I successfully uploaded files with Angular2 and ASP.NET Core.

我意识到您的后端并不完全相同，但是我认为这可能会把您带向正确的方向.

I realize your backend is not exactly the same, but I think it might put you in the right direction.

我使用了从valor软件下载ng2-file-up

使用npm install进行安装，将其添加到您的程序包文件夹中，并使用systemjs或webpack对其进行配置.我使用angular-cli webpack，所以我唯一手动进行的配置是在组件文件中.

Install it with npm install, add it to your package folder, configure it with systemjs or webpack. I use angular-cli webpack so the only config I did manually is in the component file.

前端Angular2

import { Component, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';

import {FILE_UPLOAD_DIRECTIVES, FileUploader, Headers} from 'ng2-file-upload/ng2-file-upload';


const URL = 'http://localhost:49513/api/values/';

@Component({
  selector: '...',
  templateUrl: '...',
  providers: [...],
  directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle]
})

export class ProjectDetailsComponent {

  public myHeaders: Headers[] = [];


  public uploader:FileUploader = new FileUploader(
  {
      url: URL,
      headers: <Headers[]> [
        { name: 'Content-Type', value: 'multipart/form-data' }
      ]
  });

  public hasBaseDropZoneOver:boolean    = false;
  public hasAnotherDropZoneOver:boolean = false;

  ...

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

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

  ...
}

使用ASP.NET Core的后端

[HttpPost]
public async Task<ActionResult> Post(IFormFile file)
{
    try
    {
        if (file != null && file.Length > 0)
        {
            var savePath = Path.Combine(_appEnvironment.WebRootPath, "uploads", file.FileName);

            using (var fileStream = new FileStream(savePath, FileMode.Create))
            {
                await file.CopyToAsync(fileStream);
            }

            return Created(savePath, file)
        }
        return BadRequest();
    }
    catch (Exception)
    {
        return StatusCode(500, ex.Message);
    }

}

奖金:我编辑了他们的html，以使用 Material2 代替引导程序.

Bonus: I edited their html to use Material2 instead of bootstrap.

<div class="container">

      <div class="navbar navbar-default">
          <div class="navbar-header">
              <a class="navbar-brand" href>Angular2 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 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 }} {{item?.progress}} %</strong></td>
                        <td nowrap>{{ (item?.file?.size/1024/1024).toFixed(2) }} MB</td>
                        <td>
                            <div class="progress" style="margin-bottom: 0;">

                                <md-progress-bar mode="determinate" value="{{item.progress}}"></md-progress-bar>

                            </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 (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length" md-raised-button class="md-raised md-primary">Upload all</button>
                  <button (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading" md-raised-button class="md-raised md-warn">Cancel all</button>
                  <button (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length" md-raised-button class="md-accent md-hue-1">Remove all</button>


              </div>
          </div>
      </div>
  </div>

这篇关于如何使用angular 2上传文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！