I need to upload file usingangular 2. 我在客户一方使用该软件,我在服务器一侧使用一个网络Api。 我如何利用这种组合来执行它?
我成功地把文件上载了Angular2和ASP。 NET Core。
我认识到你的后遗症并非完全一样,但我认为这可能会使你处于正确方向。
I used ng2-file-upload from valor-Soft
安装了Npm,在包件中添加,将其与系统或网络包相混。 我使用蜂窝网包,因此,唯一手工操作的简编已经列入部件档案。
<Frontend 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;
}
...
}
Backend using 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);
}
}
Bonus: I edited their html to use Material2.
<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>
材料2 页: 1
<style>
.box.has-advanced-upload {
background-color: white;
outline: 2px dashed black;
outline-offset: -10px;
height: 100px;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.box.has-advanced-upload .box__dragndrop {
display: inline;
}
.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;
}
</style>
<md-card class="detail-card">
<md-card-header>
<md-card-title>
<h3>Dosya Yükle</h3>
</md-card-title>
</md-card-header>
<md-card-content>
<div fxLayout="column">
<div fxLayout="row">
<div fxLayout="column">
<input type="file" ng2FileSelect [uploader]="uploader" multiple /><br />
<input type="file" ng2FileSelect [uploader]="uploader" />
</div>
<div fxFlex>
<h5>Select files</h5>
<div ng2FileDrop
[ngClass]="{ nv-file-over : hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="well my-drop-zone box has-advanced-upload">
Sürükle bırak
</div>
</div>
</div>
<div fxFlex="70" style="margin-bottom: 40px">
<p>Kuyruk Sayısı: {{ uploader?.queue?.length }}</p>
<md-grid-list cols="9" rowHeight="30px">
<md-grid-tile colspan="3">Dosya</md-grid-tile>
<md-grid-tile></md-grid-tile>
<md-grid-tile>Boyut</md-grid-tile>
<md-grid-tile>İşlem</md-grid-tile>
<md-grid-tile colspan="3">Durum</md-grid-tile>
<span *ngFor="let item of uploader.queue">
<md-grid-tile colspan="3"> <strong>{{ item?.file?.name }}</strong> </md-grid-tile>
<md-grid-tile> <strong> {{item?.progress}} %</strong> </md-grid-tile>
<md-grid-tile> {{ (item?.file?.size/1024/1024).toFixed(2) }} MB </md-grid-tile>
<md-grid-tile>
<span *ngIf="item.isSuccess"><i class="material-icons " style="color: #0ba048;">check</i></span>
<span *ngIf="item.isCancel"><i class="material-icons ">cancel</i></span>
<span *ngIf="item.isError"><i class="material-icons">error</i></span>
</md-grid-tile>
<md-grid-tile>
<button type="button" class="btn btn-success btn-xs" style="margin-right: 3px;" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
<md-icon>cloud_upload</md-icon><span> Yükle</span>
</button>
</md-grid-tile>
<md-grid-tile>
<button type="button" class="btn btn-warning btn-xs" style="margin-right: 3px;" (click)="item.cancel()" [disabled]="!item.isUploading">
<md-icon>cancel</md-icon><span> İptal</span>
</button>
</md-grid-tile>
<md-grid-tile>
<button type="button" class="btn btn-danger btn-xs" style="margin-right: 3px;" (click)="item.remove()">
<md-icon>delete_forever</md-icon><span> Sil </span>
</button>
</md-grid-tile>
<md-grid-tile colspan="9">
<md-progress-bar mode="determinate" value="{{item.progress}}"></md-progress-bar>
</md-grid-tile>
</span>
<md-grid-tile colspan="9">
Kuyruk işlem:
</md-grid-tile>
<md-grid-tile colspan="9">
<md-progress-bar color="primary" mode="determinate" [value]="uploader.progress" style="height:10px"></md-progress-bar>
</md-grid-tile>
</md-grid-list>
</div>
</div>
</md-card-content>
<md-card-actions>
<div style="padding:10px">
<button (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length" md-raised-button>Tümünü Yükle</button>
<button (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading" md-raised-button class="md-raised md-warn">Tümünü İptal Et</button>
<button (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length" md-raised-button class="md-accent md-hue-1">Liste Temizle</button>
</div>
<md-progress-bar color="primary" mode="determinate" [value]="uploader.progress" style="height:10px"></md-progress-bar>
</md-card-actions>
</md-card>
IN my project , I have JSP app and Angular 14 App which are running parallels on same tomcat . Now , I want to target index.html of Angular from JSP page So whenever JSP page will call it will ...
我正在拿到形式上未定义的形式价值。
I have a button. <button (click)="bxs()"> <span>BXS</span> </button> my TS: bxs(): void { window.open(url, "bxs"); } how to show a error ...
I m having trouble looking to prevent the "opacity" state of the parent div from being inherited by the child divs. In this particular code, I was looking for the opacity to not affect the ...
I am using a mat-table so users can see a list of companyConnection objects for an application. My issue occurs when a user clicks the edit button and updates a companyConnection using a modal, but ...
The Angular Router has the ability to configure the router to restore scrolling and the linked documentation provides an example of how to do it when loading data. How do we just configure the ...
I have this error when I build my Angular app:
Trying to sort the material table with date column , date format is MM/DD/YYYY ,h:mm A , order of date is not by latest date and time. Anything which i missed from the below stackblitz code. https:/...