Rails DirectUpload的directUploadWillStoreFileWithXHR回调未触发

directUploadWillStoreFileWithXHR 回调不触发的核心原因是**DirectUpload 构造函数传参顺序错误**：

• 官方@rails/activestorage包提供的DirectUpload构造函数仅支持3个位置参数，固定顺序为 (待上传文件, 直传接口地址, 生命周期委托对象)，第三个参数传入的对象需要实现directUploadWillStoreFileWithXHR这类回调方法，上传过程中DirectUpload会主动调用该对象上的对应回调。
• 你在封装createDirectUpload方法时，在第二个参数（url）之后额外插入了source.token、source.attachmentName两个参数，把原本应该放在第三位的委托对象（也就是你的上传类实例this，上面定义了目标回调）挤到了第五个参数位，DirectUpload实例内部实际拿到的第三个参数是字符串类型的source.token，自然无法找到并调用你定义的回调方法。
• 上传逻辑能正常执行是因为DirectUpload核心上传逻辑仅依赖前两个参数（文件、直传地址），多余传入的参数会被直接忽略，不影响基础上传请求的发送。

• 第一步：调整createDirectUpload方法的传参，移除构造函数中多余的位置参数，将委托对象放回第三个参数的正确位置：

import { DirectUpload } from "@rails/activestorage";

function createDirectUpload(file, source, controller) {
  // 严格按照官方参数顺序传参，多余自定义参数不要塞到构造函数位置参数中
  return new DirectUpload(file, source.url, controller);
}

• 第二步：处理你原本想传入的token、attachmentName这类自定义参数，这类参数官方构造函数不支持直接传入，按场景选择处理方式：
  • 接口认证类token：在directUploadWillStoreFileWithXHR回调中拿到XHR实例后，通过设置请求头携带
  • 业务自定义字段：可以拼接到直传地址的query参数中，或者在上传完成拿到signed_id后，和其他业务字段一起随表单提交
    示例代码：

directUploadWillStoreFileWithXHR(xhr) {
  // 示例：给上传请求添加自定义认证头
  xhr.setRequestHeader("X-Upload-Token", this.source.token);
  this.bindProgressEvent(xhr);
  this.emitDropzoneUploading();
}

调整完成后，DirectUpload能正确拿到委托对象，上传过程中会正常触发directUploadWillStoreFileWithXHR回调。

内容的提问来源于stack exchange，提问作者Petros Kalafatidis