nz-upload的[nzCustomRequest]文件列表一直loading的问题

   日期:2020-11-13     浏览:157    评论:0    
核心提示:nz-upload的[nzCustomRequest]文件列表一直loading的问题,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!);
        }
      );
    }
  }
}
 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服