我成功上传了Angular2和ASP.NET Core的文件.
原文链接:https://www.f2er.com/angularjs/140284.html我意识到你的后端并不完全相同,但我认为它可能会让你朝着正确的方向前进.@H_404_6@
我用了ng2-file-upload from valor-software@H_404_6@
使用npm install安装它,将其添加到您的包文件夹,使用systemjs或webpack进行配置.我使用angular-cli webpack,因此我手动执行的唯一配置是在组件文件中.@H_404_6@
前端Angular2@H_404_6@
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@H_404_6@
[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而不是bootstrap.@H_404_6@
<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>