NG-ZORRO 的上传问题往往跨了三层:回调是否拿到正确的组件上下文、上传组件处于什么状态,以及服务端是否真正处理成功。月份选择则是另一个问题,需要核对日期组件的具体版本,不能靠改回调解决。

上传参数分别负责什么

上传地址由 nzAction 指定;nzName 是发送给后端的文件字段名,需与接口约定一致。nzData 用于附加参数,nzHeaders 用于请求头,nzFileList 管理列表。nzBeforeUpload 和 nzCustomRequest 分别涉及上传前判断与自定义请求流程。

这些参数的类型、返回值和浏览器支持应以项目安装版本的 NG-ZORRO Upload 文档 为准。前端文件类型筛选不能代替服务端对内容、大小和权限的校验;携带 cookie 也需要同时满足跨域与凭据配置。

nzChange 要区分组件状态和业务结果

回调对象主要有 file、fileList 和上传进度相关的 event。常见文件状态是:

状态读取方式
uploading上传尚在进行,进度信息可能可用
done上传组件认为请求已完成,还要检查服务端响应
error请求或上传过程失败,检查错误信息
removed文件已从组件列表移除,不等于服务器文件被删除

接口可能返回 HTTP 成功状态,却在业务响应中说明校验失败。因此不能只判断 done 就提示“入库成功”。下面仅演示响应约定为对象且 ok === true 时的业务判断,不是通用响应协议:

function uploadMessage(change) {
  const file = change.file;
  if (file.status === "error") return "上传请求失败";
  if (file.status !== "done") return "尚未完成";
  return file.response?.ok === true
    ? "服务端已确认成功"
    : "请求已完成,请检查业务响应";
}

若接口返回字符串,先按接口契约解析和校验;不要把响应内容直接拼进 HTML。

箭头函数解决的是词法 this,不是所有回调问题

需要访问组件字段的属性回调可用箭头函数保存外层 this;普通函数的 this 则由调用方式决定。箭头函数并非只是匿名函数的短写。MDN:箭头函数

const addOne = value => value + 1;
const addOneWithBlock = value => { return value + 1; };
const recordOnly = value => { console.log(value); };

前两种返回计算结果,第三种返回 undefined,但作为只记录信息的回调并没有错。上传前钩子若要求返回布尔值或异步结果,就必须遵守那个返回契约;不能一概说“有大括号就必须写 return”。

月份范围选择,要同时看模式和日期值

遇到范围组件只能选日、不能选月时,先记录 ng-zorro-antd 与 Angular 的版本,再查对应版本的组件名称、模式属性、变更事件和绑定值类型。当前 DatePicker 文档 提供日期模式说明,但不构成 2018 年版本的兼容矩阵。

“显示为年月”和“按月份选择”也不同:格式化显示不一定改变选择粒度。升级后还要检查起止月份、清空、跨年和表单提交值,不凭一个面板截图判断功能全部正常。