nz-upload 文件上传 - Angular

此次对于数据列表的文件导入通过 nz-upload 来实现，官方 Upload 上传 文档中很详细，具体需要配置的参数均可查阅到；

<nz-upload [nzAction]="uploadingFile"
           [nzHeaders]="uploadingHeader"
           [nzShowUploadList]="false"
           nzName="uploadFile"
           (nzChange)="btnClickUploadRotationUser($event)"
>
    <button nz-button
            nzSize="small"
            style="background-color: rgba(25, 158, 216, 1) !important; color: #ffffff; height: 28px; border-radius: 5px; display: flex; align-items: center;"
            ><i nz-icon nzType="upload"></i>导入
    </button>
</nz-upload>

get uploadingFile() { // 附件上传 URL
    return `${environment.apiURL.path}/api/xxxxx`;
}

get uploadingHeader() { // 请求 header
    const caId = YHUtility.getQueryVariable('caId');
    const token = YHUtility.getQueryVariable('token');
    return {
        caid: caId,
        token: token, 
    }
}

btnClickUploadRotationUser(info: NzUploadChangeParam): void { // 点击事件 - 附件上传回调
    console.log('[点击事件] - 附件上传');
    console.log(info);

    if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
        const stateCode = info.file.response.code;
        const message = info.file.response.message;
        if (stateCode === 200) {
            this.msg.success(`${info.file.name} <br /> ${message}`, {
                nzDuration: 5000,
            });
        } else {
            this.msg.error(`导入失败 ${message}`);
        }

    } else if (info.file.status === 'error') {
            this.msg.error(`${info.file.name} 导入失败`);
    }
}

如上便是附件上传相关的全部实现部分记录小结，可供大家参考。

以上便是此次分享的全部内容，希望能对大家有所帮助！