如何在UploadThing中从客户端向中间件传递数据？

嘿，我太懂你这种文档不全又卡壳的难受了！UploadThing这块确实没写明白，我来给你捋捋两种亲测有效的解决办法：

方法一：修正Headers的使用姿势（适合HTTP头类元数据） #

你之前的代码有两个小坑导致拿不到数据：

1. HTTP自定义头得符合规范，建议用X-前缀（比如X-Data），而且中间件里获取时，所有头名会被自动转成小写；
2. 你直接打印req是看不到具体头内容的，得从req.headers里取对应字段。

修改后的客户端代码：

<UploadButton
  endpoint="imageUploader"
  headers={{
    "X-Custom-Header": "custom-value22222222",
    "X-Data": "test" // 改成符合规范的自定义头格式
  }}
/>

对应的中间件代码：

.middleware(async ({ req }) => {
  // 注意这里的头名是小写的
  console.log('自定义头内容:', req.headers['x-custom-header']);
  console.log('测试数据:', req.headers['x-data']);
  return { userId: user.id };
})

方法二：用Metadata传递数据（更推荐！） #

其实UploadThing专门做了metadata参数来传递自定义业务数据，这比用headers靠谱多了——不用受HTTP头的各种规则限制，而且中间件里拿数据直接得很，官方文档没写细但这是公认的正确用法。

客户端代码改成这样：

<UploadButton
  endpoint="imageUploader"
  // 用metadata传任意自定义数据都可以
  metadata={{
    customValue: "custom-value22222222",
    data: "test",
    // 甚至能直接传用户ID这类业务数据
    userId: user.id
  }}
/>

中间件里直接就能拿到metadata，不用再折腾req：

.middleware(async ({ metadata }) => {
  console.log('自定义值:', metadata.customValue);
  console.log('测试数据:', metadata.data);
  // 直接用metadata里的userId也超方便
  console.log('用户ID:', metadata.userId);
  return { userId: metadata.userId };
})

我自己用UploadThing的时候基本都是用metadata传数据，很少碰headers，毕竟前者就是专门干这个的，完全没那些奇怪的限制。你先试试metadata的方式，肯定能解决你的问题！

备注：内容来源于stack exchange，提问作者David