Angular HttpClient upload file with FormData
从sof上找到一个example:https://stackoverflow.com/questions/46206643/asp-net-core-2-0-and-angular-4-3-file-upload-with-progress,不但上传文件,而且支持多文件:
模板代码:
<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!');
});
}
}
单文件上传,改改就行。
另外那个FormData接口的使用需要IE9兼容填充库:https://angular.cn/guide/browser-support#建议的填充库
Angular HttpClient upload file with FormData的更多相关文章
- httpclient upload file
用httpclient upload上传文件时,代码如下: HttpPost httpPost = new HttpPost(uploadImg); httpPost.addHeader(" ...
- post upload file & application/x-www-form-urlencoded & multipart/form-data
post upload file application/x-www-form-urlencoded & multipart/form-data https://stackoverflow.c ...
- 页面无刷新Upload File
页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- Upload file
<h3>Upload File</h3> <form action="@Url.Action("Upload","UploadCo ...
- Express web框架 upload file
哈哈,敢开源,还是要有两把刷子的啊 今天,看看node.js 的web框架 Express的实际应用 //demo1 upload file <html><head><t ...
- fetch API & upload file
fetch API & upload file https://github.com/github/fetch/issues/89 https://stackoverflow.com/ques ...
- 通过iframe 实现upload file无刷新
<html> <head> </head> <body> <form encType="multipart/form-data&q ...
- apache php upload file
/********************************************************************************* * apache php uplo ...
随机推荐
- MVPHelper更新日志 --- 新增常规分包模式
MVPHelper是一款可以自动生成MVP接口以及实现类的android studio插件,彻底解放双手! MVPHelper更新版本啦. 由于之前只支持contract模式,不是很符合大众口味 所以 ...
- HTML5 placeholder(空白提示) 属性
原文地址:HTML5′s placeholder Attribute 演示地址: placeholder演示 原文日期: 2010年08月09日 翻译日期: 2013年8月6日 浏览器引入了许多的HT ...
- Windows2003下用Dreamweaver打开CodeSmith文件设置办法
.在第一行的ASP,字符串后面添加CST,2.找到行ASP,ASA:ActiveServer Pages修改为ASP,ASA,CST:ActiveServer Pages 二.用记事本打开文件2:C: ...
- 读外部存储的权限READ_EXTERNAL_STORAGE
READ_EXTERNAL_STORAGE Added in API level 16 String READ_EXTERNAL_STORAGE Allows an application to re ...
- STL学习系列之一——标准模板库STL介绍
库是一系列程序组件的集合,他们可以在不同的程序中重复使用.C++语言按照传统的习惯,提供了由各种各样的函数组成的库,用于完成诸如输入/输出.数学计算等功能. 1. STL介绍 标准模板库STL是当今每 ...
- 【shell脚本练习】判断用户存在和用户类型
题目 写一个脚本 1. 传递一个参数给脚本,此参数为用户名: 2. 如果用户存在,则执行如下任务 * 如果用户的id号小于500,显示其为管理员或系统用户: * 否则,显示其为普通用户: 3. 如果用 ...
- windows与linux下的\r\n
\n 为ASCII的0x0a 换行 \r 为ASCII的0x0d 回车 在windows 系统中,当你输入回车时会自动变成\r\n 在l ...
- rpcz VC2010 构建
rpcz VC2010 构建 rpcz 是应用ZeroMQ和Protobuf开发的RPC. 见: https://github.com/reinferio/rpcz 及 https://code.go ...
- Android自定义view进阶-- 神奇的贝塞尔曲线
上一篇介绍了自定义view需要知道的基本函数.新开一篇献给借给我vpn的深圳_奋斗小哥. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/ ...
- 《java入门第一季》之面向对象匿名内部类面试题
面试题一: /* 按照要求,补齐代码 interface Inter { void show(); } class Outer { // ...