共有2个答案
穆英飙
对于材料2，请编辑更多@戴夫：谢谢你的回答
<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>
景河
我用Angular2和ASP成功上传了文件。净核心。
我知道你的后端并不完全相同，但我认为这可能会让你走上正确的方向。
我使用了valor软件上传的ng2文件
安装它与npm安装，添加到您的包文件夹，配置它与System js或webpack.我使用角cli webpack，所以我手动做的唯一配置是在组件文件中。
前端角2
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而不是引导。
<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编码的接口的Spring REST API。 我的问题是我无法使用Angular 2上传文件。 我在Java中的Webresources是： 当我通过带有Auth标头等的URL请求调用它时（它具有适用于Chrome的Advanced Rest Client扩展），它完全可以正常工作 证明：（在这种情况下，一切正常） Spring配置文件和Pom依
-
我正在尝试使用多部分实体方法上传文件。但它失败，错误说{“错误”：“文件参数值'无'无效”} 我的代码是: File File = new File(" C:/Users/SST-06/Desktop/new . txt ")； 我的实体文件包含所有提到的参数。 -hkYO-pblk 0 uqlxjtvklrbkosxz 7 mye-8 wbvbvanx Content-Disposition:f
-
我可以使用将文件上载为 上面的代码运行良好。 现在，我想对同一作业使用。我试着在网上搜索并实现代码。但我无法得到结果。 html代码如下所示： 代码中没有任何形式。如何解决问题？
-
我写了一个可以上传文件到服务器的服务，现在我正在放心地编写它的集成测试。功能代码如下： 如果我添加标题信息“content-type=multipart/form-data”，我将得到这样的消息：“400-Request不是一个多部分请求，有关更多信息，请参见详细信息”。这部分也让我感到困惑，因为在上面的图像中，您可以看到我正在发送一个“表单数据”文件，这怎么可能不是一个多部分请求呢？ 不管怎样，
-
问题内容： 我知道，关于这个主题的话题并非没有，但请耐心等待。我想使用Ajax或等效文件将文件上传到服务器。 我猜我配置ajax函数的方式存在问题，因为在调试模式下，除之外的所有数据均会返回。 我做错了什么吗？ 问题答案： 回顾过去，较旧的答案不切实际，不建议使用。暂停整个Javascript以仅上传文件， 您可能会在上传过程中触发其他功能 。 如果您仅将JQuery用于，则我建议使用： Axio