Uppy文件上传前事件监听器的实现与应用

背景介绍

在现代Web应用中，文件上传功能经常需要处理复杂的业务场景。特别是当需要为每个上传的文件配置不同的参数时，传统的批量上传方式就显得力不从心。Uppy作为一个现代化的文件上传库，提供了灵活的扩展机制来满足这类需求。

核心问题

在实际开发中，我们经常会遇到这样的场景：每个文件上传都需要携带不同的认证信息。例如使用Supabase存储服务配合Tus协议时，每个文件都需要一个独立的授权令牌。这个令牌通常只对特定文件有效，无法在多个文件间共享使用。

技术解决方案

Uppy提供了onBeforeRequest这一强大的钩子函数，它会在每次文件上传请求发起前被调用。通过这个机制，我们可以实现以下功能：

1. 动态令牌获取：在每次请求前获取新的授权令牌
2. 请求头定制：为每个请求设置特定的认证头
3. 错误处理：当令牌失效时自动刷新

实现代码示例

import Uppy from "@uppy/core";
import Tus from "@uppy/tus";

let token = null;

async function getAuthToken() {
  const res = await fetch("/auth/token");
  const json = await res.json();
  return json.token;
}

const uppy = new Uppy().use(Tus, {
  endpoint: "<your-endpoint>",
  async onBeforeRequest(req) {
    if (!token) {
      token = await getAuthToken();
    }
    req.setHeader("Authorization", `Bearer ${token}`);
  },
  async onAfterResponse(req, res) {
    if (res.getStatus() === 401) {
      token = await getAuthToken();
    }
  },
});

工作机制解析

1. 请求前处理：onBeforeRequest会在每个文件上传请求前执行，确保每次请求都携带最新的认证信息
2. 令牌缓存：通过局部变量缓存令牌，避免重复获取
3. 自动刷新：当收到401未授权响应时，自动获取新令牌并重试

应用场景扩展

这种机制不仅适用于认证令牌的场景，还可以应用于：

1. 动态生成文件存储路径
2. 为不同文件类型设置不同的上传参数
3. 实现基于文件内容的特殊处理逻辑
4. 多租户系统中的租户隔离

性能考量

虽然这种机制非常灵活，但也需要注意：

1. 令牌获取应该是轻量级的操作
2. 考虑实现令牌的本地缓存策略
3. 对于大批量上传，可能需要优化令牌获取逻辑

总结

Uppy的请求钩子机制为复杂上传场景提供了优雅的解决方案。通过合理使用onBeforeRequest和onAfterResponse，开发者可以轻松实现各种定制化的上传需求，同时保持代码的简洁性和可维护性。这种模式特别适合需要为每个文件单独配置参数的场景，是现代Web应用中文件上传功能的有力工具。