处理文件上传和进度条的显示(进度条随文件上传进度值变化)

news2024/11/27 8:29:08

成品效果图:

解决问题:上传文件过大时,等待时间过长,但是进度条却不会动,只会在上传完成之后才会显示上传完成

上传文件的upload.component.html

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="'文件上传'" [nzWidth]="'1000px'" [nzFooter]="modalFooter"
  (nzOnCancel)="onCancel()" class="advice-upload-file">

  <div nz-row>
    <nz-upload #uploadListData nzType="drag" [(nzFileList)]="fileList" [nzMultiple]="isMultiple" [nzLimit]="0"
      [nzBeforeUpload]="beforeUpload">
      <p class="ant-upload-drag-icon">
        <i nz-icon nzType="inbox"></i>
      </p>
      <p>
        点击或拖拽上传
      </p>
    </nz-upload>
    <div style="padding-top: 10px">
      <h6>文件上传进度:</h6>
      <nz-progress [nzPercent]="percent">
      </nz-progress>
    </div>
  </div>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="cleanList()">清空上传队列</button>
    <button nz-button nzType="default" (click)="onCancel()">取消</button>
    <button nz-button nzType="primary" (click)="submit()">上传</button>
  </ng-template>
</nz-modal>

upload.component.ts

  /** 是否允许上传多个文件 */
  isMultiple = true;
  /**
   * 文件赋值列表
   */
  fileList = [];
  /**
   * 上传进度条
   */
  percent = null;

 /** 上传 */
  submit() {
    let successCount = 0;
    this.fileList.forEach(file => {
      const formData: FormData = new FormData();
      formData.append('file', file.originFileObj, file.name);
      this.uploadService.uploadMultiFiles(formData, this.categoryId, file.name).subscribe(data => {
        if (data) {
          successCount++;
          this.msg.create('success', data['fileName'] + `上传成功!`);
          this.percent = Number((successCount / this.fileList.length * 100).toFixed(2));
        }
        if (this.fileList.length === successCount) {
          setTimeout(() => {
            this.onCancel();
            this.notification.emit({
              operation: null,
              data: null
            });
          }, 1000);
        }
      });
    });
  }

  cleanList() {
    this.fileList = [];
  }

  beforeUpload = (file: UploadFile) => {
    // const isLt200M = file.size / 1024 / 1024 < 200;
    // if (!isLt200M) {
    //   this.msg.error('文件大小不超过200MB!');
    //   return false;
    // }
    return true;
  }

接口:


  /** 上传文件 */
  uploadMultiFiles(files: FormData, categoryId: string, fileName: string): Observable<Array<any>> {
    return this.http.post(`${this.URL}` + `/uploadFile?fileName=${fileName}&categoryId=${categoryId}`, files);
  }

效果就是上传文件大时进度条一直是0%,然后上传完成才100%(会让用户误解没上传成功重复上传)

效果图:

解决方法如下:

1、修改接口里面的传参post,鼠标移上去一般有显示类型参数

  /** 上传文件 */
  uploadMultiFiles(files: FormData, categoryId: string, fileName: string): Observable<any> {
    return this.http.post(`${this.URL}` + `/uploadFile?fileName=${fileName}&categoryId=${categoryId}`, files, {}, {
      reportProgress: true,
      observe: 'events',
    });
  }

2、修改upload.component.ts 文件的提交方法

  /** 上传 */
  submit() {
    this.fileList.forEach(file => {
      const formData: FormData = new FormData();
      formData.append('file', file.originFileObj, file.name);
      this.uploadService.uploadMultiFiles(formData, this.categoryId, file.name).subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percent = Math.round(100 * event.loaded / event.total);
        } else if (event.type === HttpEventType.Response) {
          // 文件上传成功
          this.msg.create('success', event.body['fileName'] + `上传成功!`);
          setTimeout(() => {
            this.onCancel();
            this.notification.emit({
              operation: null,
              data: null
            });
          }, 1000);
        }
      });
    });
  }

效果图:进度值会随着上传多少变化

参考文章:

angular:

https://www.yisu.com/jc/843309.html

axios:

https://www.jianshu.com/p/9564b549d2d6

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2220712.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

跨浏览器免费书签管理系统

随着互联网信息的爆炸式增长&#xff0c;如何有效管理我们日常浏览中发现的重要网页&#xff0c;成为了每个重度互联网用户的需求。一个跨平台的书签管理网站能够帮助用户在不同设备之间无缝同步和管理书签。本文将分享如何使用 Python 和 SQLite 构建一个简单、易于维护的跨平…

MySQL数据库操作——(4)

目录 8 视图 8.1 常见的数据库对象 8.2 视图概述 8.2.1 为什么使用视图&#xff1f; 8.2.2 视图的理解 8.3 创建视图 8.3.1 创建单表视图 8.3.2 创建多表联合视图 8.3.3 基于视图创建视图 8.4 查看视图 8.5 更新视图的数据 8.5.1 一般情况 8.6 修改、删除视图 8.…

基于SpringBoot+Vue景区酒店点评系统【提供源码+答辩PPT+参考文档+项目部署】

&#x1f4a5; 这两年毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的JavaWeb项目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要求&#xff01; ❗如何解决这类问题&#xff1f; 让我们能够顺利通过毕业&#xff0c;我也一直在不断思考、努力、精进。通过2024年…

计算机网络基本命令

实验内容&#xff1a; 1. **ipconfig命令** - **用途**&#xff1a;显示和配置TCP/IP网络设置。 - **常用选项**&#xff1a; - ipconfig&#xff1a;显示所有网络适配器的IP地址、子网掩码、默认网关等信息。 - ipconfig /all&#xff1a;显示所有网络适配器…

汽车预约维修系统ssm+论文源码调试讲解

2相关技术 2.1微信小程序 小程序是一种新的开放能力&#xff0c;开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。尤其拥抱微信生态圈&#xff0c;让微信小程序更加的如虎添翼&#xff0c;发展迅猛。 2.2 MYSQL数据…

Redis在实践的关键点

Redis键值设计 优雅的key结构 Redis的Key虽然可以自定义,但最好遵循下面的几个最佳实践约定: 遵循基本格式:[业务名称]:[数据名]:[id]长度不超过44字节不包含特殊字符例如:我们的登录业务,保存用户信息,其key可以设计成如下格式: 这样设计的好处: 可读性强避免key冲突…

通过比较list与vector在简单模拟实现时的不同进一步理解STL的底层

cplusplus.com/reference/list/list/?kwlist 当我们大致阅读完list的cplusplus网站的文档时&#xff0c;我们会发现它提供的接口大致上与我们的vector相同。当然的&#xff0c;在常用接口的简单实现上它们也大体相同&#xff0c;但是它们的构造函数与迭代器的实现却大有不同。…

YOLOv11[基础]】热力图可视化实践① | 视频版 | 输入为视频文件

目录 一 热力图 二 安装YOLOv11 三 实践 一 热力图 使用Ultralytics YOLO11生成的热图将复杂的数据转换为充满活力的彩色编码矩阵。这个可视化工具使用一系列颜色来表示不同的数据值,其中较暖的色调表示较高的强度

探索 SVG 创作新维度:svgwrite 库揭秘

文章目录 **探索 SVG 创作新维度&#xff1a;svgwrite 库揭秘**背景介绍库简介安装指南基础函数使用实战场景常见问题与解决方案总结 探索 SVG 创作新维度&#xff1a;svgwrite 库揭秘 背景介绍 在数字艺术和网页设计领域&#xff0c;SVG&#xff08;Scalable Vector Graphic…

如何有效维护您的WordPress在线商店内容:提高客户参与度与转化率的实用技巧

在电子商务领域&#xff0c;内容为王。新鲜、相关且有吸引力的内容能显著提升客户参与度和转化率。本文将探讨如何有效更新和维护您的在线商店内容&#xff0c;确保客户始终获得最佳体验。 定期更新产品信息 产品描述 产品描述是吸引客户和促成销售的关键。定期检查并更新产…

PyCharm借助MobaXterm跳板机连接服务器

服务器信息&#xff1a; Step 1 MovaXterm→Session→SSH输入服务器信息 Step 2 MovaXterm→Session→SSH→Network setting→SSG gateway(jump host) 输入跳板机信息 键入密码即可 Step 3 MovaXterm→Tunneling→New SSH tunnel 依次输入&#xff1a;A本机端口&#xff0c…

基于RBF神经网络的双参数自适应光储VSG构网逆变器MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 此模型源侧部分采用光伏发电系统与混合储能系统&#xff08;蓄电池超级电容&#xff09;&#xff0c;并网逆变器采用虚拟同步发电机&#xff08;VSG&#xff09;控制&#xff0c;为系统提供惯量阻尼…

Numpy基础01

目录 1.array创建对象 1.1定义一维数组 1.2定义二维数组 2.Numpy的数据类型 3.数据类型标识码 4.array的API 4.1astype() 4.2max() 4.3min() 4.4sum() 4.5reshape() 4.6random.rand() 5.数组属性 5.1ndim 5.2shape 5.3itemsize 5.4flags 6.创建数组方法 6.1a…

VScode远程服务器之远程容器进行开发(四)

VScode远程服务器之远程容器进行开发(四) Remote-Containers 可以让vscode使用docker中的容器环境进行开发和debug。 1. 使用一个运行中的容器进行开发 - Attach to running container 如果正好有一个正在运行的容器。可能是正在运行的服务,或者是预先build好的开发镜像…

2024.10.9华为留学生笔试题解

第一题无线基站名字相似度 动态规划 考虑用动态规划解决 char1=input().strip() char2=input().strip() n,m=len(char1),len(char2) dp=[[0]*(m+1) for _ in range(n+1)] #dp[i][j]定义为以i-1为结尾的char1 和以 j-1为结尾的char2 的最短编辑距离 setA = set(wirel@com) set…

初识Java GUI 编程

文章目录 前言一、什么是 GUI 编程&#xff1f;二、Java GUI 编程的基础组件1. JFrame2.JButton3. JLabel提示 三、布局管理器结语 前言 在当今的软件开发领域&#xff0c;图形用户界面&#xff08;GUI&#xff09;的重要性不言而喻。它为用户提供了直观、友好的交互方式&…

MySQL初阶——隔离级别之Read view

一、什么是快照&#xff1f; 当运行 select 查询语句时&#xff0c;才会触发快照&#xff0c;创建 read view 对象&#xff0c;把此时正在处理&#xff08;未提交&#xff09;的事务的 ID 都记下来&#xff0c;以便于后面查询时可以控制该读哪些事务的记录&#xff0c;不该读哪…

基于Multisim8路彩灯循环控制电路设计与仿真

1&#xff0e;彩灯能够自动循环点亮&#xff1b; 2&#xff0e;彩灯循环频率快慢可调&#xff1b; 3&#xff0e;彩灯具有8路输出。 4&#xff0e;自行设计脉冲信号产生电路。 链接&#xff1a;https://pan.baidu.com/s/1PhpVy58Y6-_uXnie8KYyzg 提取码&#xff1a;zjad

数学建模2:回归分析预测

回归模型是什么 回归分析预测模型是一种统计方法&#xff0c;用于研究变量之间的关系&#xff0c;并通过已知数据来预测一个变量的值。回归分析通常包括自变量和因变量&#xff0c;目标是建立一个回归模型来描述它们之间的关系。 简单来说回归模型就是找出一条直线或曲线来尽可…

若依框架的下载与配置

1. 若依版本 RuoYi-Vue前后端分离版。 2. 框架下载 2.1 后端框架下载 https://gitee.com/y_project/RuoYi-Vue 2.2 前端框架下载 https://github.com/yangzongzhuan/RuoYi-Vue3 3. 数据库配置 3.1 创建数据库 基于MySQL数据库&#xff0c;创建数据库&#xff1a;ry-vu…