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

一、背景

今天说来有点郁闷，大周一的早上的上班就听测试说，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)，然后发现并没有什么问题。
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;
  };

• 修改后结果如下：
  

三、文件上传显示进度条

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解决，文件上传显示进度的需求解决。