Chrome中dojox.form.Uploader的onComplete函数提前触发问题求助

这是个挺棘手的Chrome版本兼容问题，我之前也遇到过类似的Dojo上传组件异常，结合你的描述，咱们来拆解问题和解决方案：

问题核心定位 #

你遇到的情况是Chrome近期更新后，dojox.form.Uploader的onComplete事件在页面首次加载后的第一次上传时被提前触发，传入的{message: "id"}大概率是组件内部初始化时生成的临时标识事件，而非真正的服务器响应。这种"首次加载异常、后续正常"的现象，通常和浏览器行为变更导致的组件事件时序冲突有关。

针对性解决方案 #

1. 直接过滤异常回调参数 #

最简单的临时修复是在onComplete回调里先过滤掉不符合预期的{message: "id"}对象，避免执行错误的业务逻辑：

function onComplete(response) {
  // 忽略组件内部触发的异常提前调用
  if (response?.message === "id") {
    return;
  }
  
  // 处理正常的服务器响应
  if (response.result === "success") {
    console.log("上传成功:", response.msg);
    // 你的业务逻辑代码
  } else {
    console.error("上传失败:", response.msg);
  }
}

2. 调整组件初始化时序 #

首次页面加载时，可能存在DOM未完全就绪就初始化Uploader的情况，导致事件绑定异常。确保组件在DOM完全加载后再初始化：

require(["dojo/domReady!", "dojox/form/Uploader"], function(domReady, Uploader) {
  // 等待DOM完全就绪后再创建上传组件
  const uploader = new Uploader({
    url: "/your/upload/api",
    onComplete: onComplete,
    // 其他配置项
    label: "选择文件"
  }, "uploaderContainer");
  
  uploader.startup();
});

3. 强制切换到iframe上传模式 #

Chrome对XHR2/FormData的近期更新可能打破了Uploader默认XHR模式的兼容性，强制使用iframe模式可以规避这个问题：

const uploader = new Uploader({
  url: "/your/upload/api",
  uploadType: "iframe", // 强制启用iframe上传
  onComplete: onComplete
}, "uploaderContainer");

注意：iframe模式下，服务器端需要返回符合格式的HTML响应（比如包含textarea包裹的JSON），确保Uploader能正确解析响应内容。

4. 排查服务器端响应 #

检查服务器端是否在首次请求时返回了额外的响应（比如健康检查、预请求），确认只有当上传完成时才返回{result: "success", msg: "Success.", status: 201}格式的内容，避免组件误把中间响应当成上传完成信号。

调试建议 #

• 打开Chrome DevTools的Network面板，筛选XHR/文档请求，观察首次上传时的所有请求，确认{message: "id"}是否来自某个未预期的请求
• 在Uploader的onBegin、onProgress事件里添加日志，追踪事件触发顺序，看onComplete是否在上传真正完成前被触发：

const uploader = new Uploader({
  // ...其他配置
  onBegin: () => console.log("上传开始"),
  onProgress: (evt) => console.log("上传进度:", evt.percent),
  onComplete: (res) => console.log("onComplete触发:", res)
}, "uploaderContainer");

内容的提问来源于stack exchange，提问作者Kerry Gunn