Angular8_上传文件并显示百分比进度(超简单)

叁歲伎倆 2022-09-10 09:25 248阅读 0赞

# 一、背景 #

今天说来有点郁闷，大周一的早上的上班就听测试说，st环境的zip文件上传有问题，上传到服务端的zip文件大小和zip源文件的大小有200多bit的差距，导致服务器无法解压zip文件，然后无法读取和解析dicom文件。。。最后导致服务器无法正常运行（经过了dev和release环境的测试，咋就没测试出来呢？吐槽一下！）。然后又说那个啥UI不行，需要添加那个文件上传进度条。你UI设计的时候咋就不设计好呢？不吐槽了，我是吃这碗饭的，好好干吧！

# 二、bug定位 #

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VxhXaT5B-1630945915003)(https://seikim.com/i/2021/09/06/12cbqjl.png)\]  
**这个多出的bit是哪里来的呢？怎么定位呢？思路如下：**

1.  读取文件时，流的大小有变化
2.  表单上传时，文件流大小有变化
3.  后端接收流时是正常的，但是经过处理后，流的大小有变化

顺着这个思路：

1.  我第一步就是在后端断点，远程逐步debugger文件流大小是否有变化。具体操作步骤可参考[超简单！docker容器远程debugger(springboot)][docker_debugger_springboot]，然后发现并没有什么问题。
2.  第二步就是自己本地启动一个服务，后端链接st环境的地址。打开F12，一路追踪下去，从读取到表单都是和源文件大小一致的。
3.  但是当我发起上传请求的时候，出现了下面的一段描述：  
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sRtbxmK6-1630945915005)(https://seikim.com/i/2021/09/06/12n4scm.png)\]  
    我上传的zip文件里面是没有这个东西，于是大胆的猜测，这里会不会是导致文件大小不一样的原因，于是我修改了表单上传请求的方式为body上传，结果发现果然是表单上传的问题。

*  *表单上传代码，接收文件比上传文件大200bit*

//
      beforeUpload = (file: NzUploadFile): boolean => { 
        const queryParams = { 
          checkName: this.checkName
        }
        //获取上传路径
        this._myProfileCrudService.getAiUploadPath(queryParams).subscribe(data => { 
          const uploadUrl = data.data.body.urls.uploadUrl;
          let File : any = file;
          //表单上传文件
          const formData = new FormData();
          formData.append('file', File as File);
          const headers = new HttpHeaders()
                .set('Content-Type','application/zip')
          const request = new HttpRequest('PUT', uploadUrl, formData, { 
            headers
          });
          this._http
    				.request(request).subscribe(data => { 
              this.getAiExecuteRecords(true);
            })
        })
        
        return false;
      };

*  *body上传代码*

beforeUpload = (file: NzUploadFile): boolean => { 
        const queryParams = { 
          checkName: this.checkName
        }
        this._myProfileCrudService.getAiUploadPath(queryParams).subscribe(data => { 
          const uploadUrl = data.data.body.urls.uploadUrl;
          let File : any = file;
          //设置请求头
          const headers = new HttpHeaders()
                .set('Content-Type','application/zip')
          //创建request对象
          const request = new HttpRequest('PUT', uploadUrl, File as File, { 
            headers
          });
      
          this._http
    				.request(request).subscribe(event => { 
              if(event.type == HttpEventType.UploadProgress){ 
                this.schedule = ((event.loaded/event.total)*100).toFixed(2);
                console.log(this.schedule)
              }else if(event instanceof HttpResponse){ 
                console.log('File is completely uploaded!')
              }
              this.getAiExecuteRecords(true)
          })
        })
        
        return false;
      };

*  *修改后结果如下：*  
    ![12vvvfz.png][]

# 三、文件上传显示进度条 #

![68wzm.gif][]

## 1.html代码 ##

<nz-modal nzWidth="400px" [(nzVisible)]="isUploadVisible" nzTitle="" (nzOnCancel)="handleCancle()" (nzOnOk)="handleCancle()">
        <div>
            <input nz-input style=" width: 300px; height: 40px; background: #F1F1F1; border-radius: 6px;" class="uploader-input" type="text" [(ngModel)]="checkName" placeholder="输入检测名称"/>
            
            
        </div>
        <nz-upload [(nzFileList)]="fileList" [nzMultiple]="true" nzListType="" [nzBeforeUpload]="beforeUpload" [nzFilter]="filters">
                    <button [(disabled)]="!checkName" style="width: 300px; height: 40px;margin-top:26px;background: #F1F1F1;" nz-button><i nz-icon nzType="upload"></i>选择文件</button>
        </nz-upload>
    
        <div style="width: 310px; height:40px;margin-top:26px">
            <nz-progress [(nzPercent)]="schedule"></nz-progress>
        </div>
    </nz-modal>

## 2. js代码（angular） ##

//初始进度为0
      public schedule = '0';
      //默认弹窗不显示
      public isUploadVisible: boolean = false;
      
      //处理上传弹窗点击事件
      handleClick(){ 
        this.schedule = '0';
        this.isUploadVisible = true;
      }
      
      //处理关闭事件
      handleCancle(){ 
        if(this.schedule != '100' && this.schedule != '0'){ 
          this._message.warning("文件上传中...请耐心等候！")
          return;
        }
        this.isUploadVisible = false;
      }
      
      //处理上传逻辑
      beforeUpload = (file: NzUploadFile): boolean => { 
        const queryParams = { 
          checkName: this.checkName
        }
        this._myProfileCrudService.getAiUploadPath(queryParams).subscribe(data => { 
          const uploadUrl = data.data.body.urls.uploadUrl;
          let File : any = file;
          //请求头
          const headers = new HttpHeaders()
                .set('Content-Type','application/zip')
    
          //开启reportProgress，必须，不然无法获取进度
          const request = new HttpRequest('PUT', uploadUrl, File as File, { 
            headers,
            reportProgress: true,
          });
      
          this._http
    				.request(request).subscribe(event => { 
              // 如果Http事件类型为上传，则计算进度 = (加载数/总数)*100
              if(event.type == HttpEventType.UploadProgress){ 
                this.schedule = ((event.loaded/event.total)*100).toFixed(2);
                console.log(this.schedule)
              }else if(event instanceof HttpResponse){ 
                console.log('File is completely uploaded!')
              }
              this.getAiExecuteRecords(true)
          })
        })
        
        return false;
      };

至此，上传文件大小不符的bug解决，文件上传显示进度的需求解决。

[docker_debugger_springboot]: https://mp.weixin.qq.com/s/_MacATbNZR84BnKawtJCgw
[12vvvfz.png]: https://seikim.com/i/2021/09/06/12vvvfz.png
[68wzm.gif]: https://seikim.com/i/2021/09/07/68wzm.gif