从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的更多相关文章

  1. httpclient upload file

    用httpclient upload上传文件时,代码如下: HttpPost httpPost = new HttpPost(uploadImg); httpPost.addHeader(" ...

  2. 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 ...

  3. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

  4. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  5. Upload file

    <h3>Upload File</h3> <form action="@Url.Action("Upload","UploadCo ...

  6. Express web框架 upload file

    哈哈,敢开源,还是要有两把刷子的啊 今天,看看node.js 的web框架 Express的实际应用 //demo1 upload file <html><head><t ...

  7. fetch API & upload file

    fetch API & upload file https://github.com/github/fetch/issues/89 https://stackoverflow.com/ques ...

  8. 通过iframe 实现upload file无刷新

    <html>    <head> </head> <body> <form encType="multipart/form-data&q ...

  9. apache php upload file

    /********************************************************************************* * apache php uplo ...

随机推荐

  1. MVPHelper更新日志 --- 新增常规分包模式

    MVPHelper是一款可以自动生成MVP接口以及实现类的android studio插件,彻底解放双手! MVPHelper更新版本啦. 由于之前只支持contract模式,不是很符合大众口味 所以 ...

  2. HTML5 placeholder(空白提示) 属性

    原文地址:HTML5′s placeholder Attribute 演示地址: placeholder演示 原文日期: 2010年08月09日 翻译日期: 2013年8月6日 浏览器引入了许多的HT ...

  3. Windows2003下用Dreamweaver打开CodeSmith文件设置办法

    .在第一行的ASP,字符串后面添加CST,2.找到行ASP,ASA:ActiveServer Pages修改为ASP,ASA,CST:ActiveServer Pages 二.用记事本打开文件2:C: ...

  4. 读外部存储的权限READ_EXTERNAL_STORAGE

    READ_EXTERNAL_STORAGE Added in API level 16 String READ_EXTERNAL_STORAGE Allows an application to re ...

  5. STL学习系列之一——标准模板库STL介绍

    库是一系列程序组件的集合,他们可以在不同的程序中重复使用.C++语言按照传统的习惯,提供了由各种各样的函数组成的库,用于完成诸如输入/输出.数学计算等功能. 1. STL介绍 标准模板库STL是当今每 ...

  6. 【shell脚本练习】判断用户存在和用户类型

    题目 写一个脚本 1. 传递一个参数给脚本,此参数为用户名: 2. 如果用户存在,则执行如下任务 * 如果用户的id号小于500,显示其为管理员或系统用户: * 否则,显示其为普通用户: 3. 如果用 ...

  7. windows与linux下的\r\n

    \n   为ASCII的0x0a   换行        \r   为ASCII的0x0d   回车         在windows   系统中,当你输入回车时会自动变成\r\n        在l ...

  8. rpcz VC2010 构建

    rpcz VC2010 构建 rpcz 是应用ZeroMQ和Protobuf开发的RPC. 见: https://github.com/reinferio/rpcz 及 https://code.go ...

  9. Android自定义view进阶-- 神奇的贝塞尔曲线

    上一篇介绍了自定义view需要知道的基本函数.新开一篇献给借给我vpn的深圳_奋斗小哥. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/ ...

  10. 《java入门第一季》之面向对象匿名内部类面试题

    面试题一: /*         按照要求,补齐代码             interface Inter { void show(); }             class Outer { // ...