Supabase Storage桌面端上传正常，移动端浏览器上传无限加载求助

1. 修复文件路径的空格bug #

你的代码中filePath末尾多了一个空格：

const filePath = `${user.id}/${uniqueFileName} ` // 末尾存在多余空格

移动端浏览器对URL路径的空格处理容错性更低，可能导致Supabase Storage无法正确解析路径，进而使上传请求挂起。修改为：

const filePath = `${user.id}/${uniqueFileName}`

2. 优化前端文件哈希计算逻辑 #

calculateFileHash(file)如果是同步处理大文件，移动端CPU性能不足会导致主线程阻塞，看起来像无限加载。建议：

• 改用异步分块哈希计算，避免阻塞UI线程
• 在计算哈希时添加UI提示（如“正在校验文件...”），让用户感知到后台操作
• 示例分块哈希实现（基于Web Crypto API）：

async function calculateFileHash(file) {
  const chunkSize = 64 * 1024 * 1024; // 64MB分块，可根据设备调整
  const hashAlgorithm = 'SHA-256';
  const crypto = window.crypto || window.msCrypto;
  const hash = crypto.subtle.createHash(hashAlgorithm);
  
  let offset = 0;
  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const arrayBuffer = await chunk.arrayBuffer();
    hash.update(arrayBuffer);
    offset += chunkSize;
  }
  
  const hashBuffer = await hash.digest();
  return Array.from(new Uint8Array(hashBuffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

3. 添加上传超时机制 #

移动端网络波动大，未设置超时的请求可能永久挂起。用AbortController给上传请求添加超时限制：

// 在上传前创建AbortController
const uploadController = new AbortController();
const uploadTimeout = setTimeout(() => uploadController.abort(), 30000); // 30秒超时

// 上传时传入signal参数
const { error: uploadError } = await supabase.storage.from("documents").upload(
  filePath, 
  file,
  { signal: uploadController.signal }
);

clearTimeout(uploadTimeout); // 清除超时定时器

if (uploadError) {
  if (uploadError.name === 'AbortError') {
    setError("上传超时，请检查网络后重试");
  } else if (uploadError.message.includes("duplicate key")) {
    setError("您的存储中已有同名文件，请重命名后重试");
  } else {
    throw uploadError;
  }
  return;
}

4. 升级Supabase SDK版本 #

旧版Supabase SDK可能存在移动端浏览器兼容性问题，执行命令升级到最新稳定版：

npm update @supabase/supabase-js
# 或 yarn upgrade @supabase/supabase-js

5. 用移动端调试工具定位卡点 #

通过Chrome浏览器的chrome://inspect功能连接移动端设备，查看Network面板：

• 确认是calculateFileHash卡住，还是Supabase的查询/上传请求pending
• 检查请求的状态码、响应头，是否有CORS或权限相关错误

内容的提问来源于stack exchange，提问作者GRACE OLABODE