ASP.NET Core 2.0和Angular 4.3文件上传进度
发布时间:2020-12-15 18:59:10 所属栏目:asp.Net 来源:网络整理
导读:使用新的Angular 4.3 HttpClient,如何在向客户端上报上传进度的同时上传和访问ASP.NET Core 2.0控制器中的文件? 解决方法 这是一个开始的工作示例: HTML input #file type="file" multiple (change)="upload(file.files)" /span *ngIf="uploadProgress 0 u
使用新的Angular 4.3
HttpClient,如何在向客户端上报上传进度的同时上传和访问ASP.NET Core 2.0控制器中的文件?
解决方法
这是一个开始的工作示例:
HTML <input #file type="file" multiple (change)="upload(file.files)" /> <span *ngIf="uploadProgress > 0 && uploadProgress < 100"> {{uploadProgress}}% </span> 打字稿 import { Component } from '@angular/core'; import { HttpClient,HttpRequest,HttpEventType,HttpResponse } from '@angular/common/http' @Component({ selector: 'files',templateUrl: './files.component.html',}) export class FilesComponent { public uploadProgress: number; constructor(private http: HttpClient) { } upload(files) { if (files.length === 0) return; const formData = new FormData(); for (let file of files) formData.append(file.name,file); const req = new HttpRequest('POST',`api/files`,formData,{ reportProgress: true,}); this.http.request(req).subscribe(event => { if (event.type === HttpEventType.UploadProgress) this.uploadProgress = Math.round(100 * event.loaded / event.total); else if (event instanceof HttpResponse) console.log('Files uploaded!'); }); } } 调节器 [HttpPost,DisableRequestSizeLimit,Route("api/files")] public async Task UploadFiles() { var files = Request.Form.Files; // now you have them } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 多终端数据同步机制设计(一)
- asp.net-mvc-3 – 使用构造方法参数过滤的Ninject绑定属性
- asp.net – Page.Request.UserHostAddress的格式无效
- Asp.net C#具有特殊字符的电子邮件地址
- asp.net-mvc – ASP.NET MVC Ajax Form OnFailure从未调用过
- asp.net – 地理位置网络服务建议
- 使用Asp.Net Core Web API文件上传文件始终为null
- asp.net-mvc-3 – 我可以在MVC3中扩展ModelStateDictionary
- asp.net-mvc – 如何使用状态代码返回客户端错误消息
- asp.net-core – 如何在ASP.NET Core中共享汇编信息?
推荐文章
站长推荐
- asp.net-mvc – ASP.NET MVC WebApi:没有为此对
- ASP.NET MVC中多个浏览器选项卡中的唯一会话
- 在MVC中使用Json.Net序列化和反序列化Json对象
- 是否有必要创建ASP.NET 4.0 SQL会话状态数据库,与
- 用Middleware给ASP.NET Core Web API添加自己的授
- asp.net-mvc-3 – 如何在自定义编辑器模板中获取
- asp.net – Request.IsAuthenticated永远不会成立
- asp.net-mvc – 如何使用RazorEngine从模板发送电
- asp.net – 如何尊重“从无Cookie域中提供静态内
- asp.net-mvc – 在ASP.NET MVC 3中授权当前用户对
热点阅读