nz-upload的[nzCustomRequest]自定义上传

场景：上传文件，上传后还可点击编辑弹出模态框重新上传，使用ng-zorro-antd库开发，运用nz-upload组件的[nzCustomRequest]自定义上传。

Bug：[nzCustomRequest]自定义上传接口调通后大概是由于接口返回的数据和组件封装所需的数据格式不符的原因导致：**上传的文件列表的status始终处于loading状态，并且上传进度始终为0。**如下图：

最初解决方案，为所欲为的瞎用（不推荐）：

1）解决一直loading的思路来源于文档的中的(nzChange)，因为他的回调中包含status字段，如下图：

通过nz-upload组件绑定(nzChange)事件，方法中强行修改文件见列表的status值，代码如下：

fileChage(file){
	file.file.status='done';  // 改变文件列表中文件的状态，强行阻止一直loading的问题
}

2）进度条始终为0的问题，也是看到官方文档有相应的方法，才瞎搞的，如下图：

代码如下：

 // 上传
  firmwareFileCustomRequest = (file: any) => {
      const fd = new FormData();
      fd.append("file", file.file as any);
      this.equiment.postFirmwareUpload(fd).subscribe(
        (event: HttpEvent<{}>) => {
          (event as any).percent = 100;  // 进度条的值直接设置为100
          // tslint:disable-next-line:no-non-null-assertion
          file.onProgress!(event, file.file!);  // 进度事件回调
          //  可以解决问题，但不推荐。
        },
        err => {
          // tslint:disable-next-line:no-non-null-assertion
          file.onError!(err, file.file!);
        }
      );
  }

最终解决方案（推荐）：
通过[nzBeforeUpload]给文件列表赋值，然后自定义上传[nzCustomRequest]中正常上传即可。
完整代码如下：

        <nz-upload id='firmwareFile' [nzCustomRequest]="firmwareFileCustomRequest" [nzFileList]='firmwareFileList'
          [nzBeforeUpload]="beforeUpload" nzAccept=".crt" [nzRemove]="firmwareFileRemove">
          <button nz-button><i nz-icon nzType="upload"></i>{{'app.equipment.SelectFirmware' | translate}}</button>
        </nz-upload>

import { NzUploadFile} from 'ng-zorro-antd/upload';
import { HttpEvent } from '@angular/common/http';

export class TboxManagerComponent implements OnInit {
  // ....
  firmwareFileList: NzUploadFile[] = [];   // 上传文件列表
  // ....
  // ....
   beforeUpload = (file: NzUploadFile): any => {
    this.firmwareFileList = this.firmwareFileList.concat(file);
    // return false;
  }
  // 上传
  firmwareFileCustomRequest = (file: any) => {
      const fd = new FormData();
      fd.append("file", file.file as any);
      this.equiment.postFirmwareUpload(fd).subscribe(
        (event: HttpEvent<{}>) => {
            // ...
			// 成功后的一些逻辑操作操作
			// ...
        },
        err => {
          // tslint:disable-next-line:no-non-null-assertion
          file.onError!(err, file.file!);
        }
      );
    }
  }
}

点赞、关注加收藏，我们一起学前端📚