Angular 文件上传进度百分比[重复]

2023-12-08

在我用 Angular 4 开发的应用程序中,用户可以将多部分文件上传到服务器。文件很大。我需要向用户显示文件上传过程的当前进度及其百分比,我该怎么做?

提前致谢!


这适用于 Angular 9 和 10 (note observe: 'events')

const headers = new HttpHeaders({
        'Content-Type': 'application/json',
        Accept: 'application/json',
        Authorization: token
      }))
const formData = new FormData();
formData.append('file_param_name', file, file.name);

this.httpClient.post(url, formData, {
    headers,
    reportProgress: true,
    observe: 'events'
}).subscribe(resp => {
    if (resp.type === HttpEventType.Response) {
        console.log('Upload complete');
    }
    if (resp.type === HttpEventType.UploadProgress) {
        const percentDone = Math.round(100 * resp.loaded / resp.total);
        console.log('Progress ' + percentDone + '%');
    } 
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 文件上传进度百分比[重复] 的相关文章

随机推荐

  • 在 Flexbox 中组合行和列

    我有三个元素article 照片 类别 然后是帖子信息 我试图弄清楚如何让类别元素堆叠在帖子信息列的顶部 2 在 3 的顶部 如果您正在查看所附照片 因此它看起来像两个 50 的列 即使有是三个弹性元素 flexbox display fl
  • 如何更改 gWidgets RGtk2 中鼠标光标的形状?

    在gWidgets中的ggraphics绘图区域中 将鼠标光标更改为 GDK TCROSS 但我想要与gwindow GDK LEFT PTR 相同的鼠标光标 library gWidgets library gWidgetsRGtk2 l
  • 球拍中的树形折叠

    我是 Racket 的初学者 我有这样的问题 定义一个结构 node 其中包含以下字段 value left middle right 该结构表示树结构中的节点 这些字段包含存储在节点 左子树中的值 分别为中子树和右子树 如果一个子树 不存
  • EntityFramework Core 自动迁移

    有没有代码可以实现自动迁移Entity Framework core code first在 asp net core 项目中 我只是在 MVC4 5 中添加 Database SetInitializer new MigrateDatab
  • Python 向量化嵌套 for 循环

    我希望能够帮助您找到和理解一种 Pythonic 方法来优化嵌套 for 循环中的以下数组操作 def func a b radius Return 0 if a gt b otherwise return 1 if distance eu
  • 在 Laravel Post 中授权资源控制器不起作用?

    我创建了一个 ProductPolicy 其中有
  • PHP:将表单中的值插入 MySQL

    我创建了一个users表中mysql从终端 我正在尝试创建简单的任务 从表单插入值 这是我的dbConfig file 这是我的Index php
  • Android Telegram 应用程序 --> java.lang.UnsatisfiedLinkError: 未找到 void 的实现

    不幸的是 几周前 Stackoverflow 上删除了一个类似的问题 我必须提出一个新问题 我正在尝试通过源 为Android构建一个自己的Telegram应用程序https github com DrKLO Telegram 我无法让它工
  • 如何使用选项字典关闭 Swift 中的 Core Data Write-Ahead 日志记录?

    如何使用 Apple 新编程语言 Swift 关闭 Core Data 中的 SQLite 预写日志记录 WAL 在 ObjC 中 我曾经在选项字典中传入键值对 journal mode DELETE storeCoordinator ad
  • 稀疏签出后过滤 git 提交历史记录

    git repo 下有几十个文件夹 但我只与其中之一合作 所以 我不想知道其他文件夹下的项目发生了什么 我从远程签出了一个启用了稀疏签出的分支 现在我本地只有一个文件夹 但使用 gitk 时我仍然可以看到完整的提交历史记录 我在交互式变基期
  • 如何处理.NET Winforms中的堆叠控件?

    我有一个表单 它将多个面板控件堆叠在一起 每个控件都根据表单上的其他选定选项显示 隐藏 在表单设计器中管理起来确实很痛苦 因为面板的行为不像完整的 TabControl 但是 您似乎无法在没有选项卡的情况下使用 TabControl 处理这
  • 使用 PDFBox 拆分大型 Pdf 文件会得到大型结果文件

    我正在使用 pdfbox 处理一些大型 pdf 文件 高达 100MB 大约 2000 页 有些页面包含二维码 我想将这些文件分割成更小的文件 页面从一个二维码到下一个二维码 我得到了这个 但结果文件大小与源文件相同 我的意思是 如果我将一
  • 具有从 C# 到非托管驱动程序的嵌入式指针的编组结构

    我正在尝试使用 P Invoked DeviceIoControl 调用将 C NET Compact Framework 3 5 与 Windows CE 6 R2 流驱动程序连接起来 对于 IOCTL 代码之一 驱动程序需要一个 Dev
  • 当准备 segue 数组不包含数据时(使用 swift)

    根据按下的按钮 我想将单词列表附加到在开始时声明的变量 pickedList 当我准备继续时 它会覆盖已添加的内容 并且仅使用开始时添加的空数组 我可以在准备继续位中添加项目并将这些项目转移过来 但这不是我想要的 我对编程非常陌生 并且进行
  • JavaFx - 更新 GUI

    我想要的只是在程序运行时更新标签 我正在读取一些文件 我希望它显示正在读取的文件的名称 但是 它仅使用以下代码显示最后一个文件 基本上 GUI 在整个过程完成之前不会响应 static Text m status update new Te
  • 在 Windows 10 中启用 cURL

    我已经在笔记本电脑上设置了本地服务器 Windows 10 家庭单语言 64 位版本 1803 我已经下载并手动安装apache24 php7 MySQL php我的管理员 and 文字新闻通过遵循这个tutorial 我正在尝试启用 cU
  • 从mysql数据库提取数据时如何在mpdf中换行

    我正在使用 MPDF 从 mysql 数据库中存储的数据生成 pdf 文件 虽然我可以按预期提取和显示其他数据 但我无法显示多行文本 因为它们都在单行中 有人可以帮我解决这个问题吗 例如 我来自文本区域的数据在数据库中显示为 一 Two T
  • 加载和释放NSImage时内存持续增加

    我遇到一个问题 我的应用程序在连续加载图像文件时会大量消耗内存到 崩溃点 例如 考虑以下代码 该代码重复加载和释放 15MB JPEG 文件 用于测试目的的大文件大小 NSURL inputUrl NSURL URLWithString f
  • 在 JavaScript 中运行 PHP 代码?这个可以用吗?

    我不确定 PHP 行是否可以在 JavaScript 函数内运行 例如 我没有尝试过运行这个 但我不认为你可以像这样运行 PHP 有人可以帮忙吗 我可以在 javascript 函数中运行 PHP 脚本 而不通过 Ajax 调用外部 PHP
  • Angular 文件上传进度百分比[重复]

    这个问题在这里已经有答案了 在我用 Angular 4 开发的应用程序中 用户可以将多部分文件上传到服务器 文件很大 我需要向用户显示文件上传过程的当前进度及其百分比 我该怎么做 提前致谢 这适用于 Angular 9 和 10 note