FileReader生成DataURL过长，如何生成短下载URL存入数据库？

你当前用FileReader.readAsDataURL生成的是Data URL，本质是把文件编码成Base64字符串，体积比原文件大30%左右，确实不适合存入数据库或作为长期下载链接。以下是几种可行的短URL方案：

方案1：后端存储+短标识映射（长期可访问） #

这是最适合用户购买后长期获取下载链接的方案：

• 前端将图片文件上传到后端服务器（或内部文件存储服务），后端为文件生成一个唯一的短标识（比如截取UUID的前8位、自定义哈希值或自增ID）。
• 后端把这个短标识和文件的实际存储路径关联，存入数据库。
• 前端拿到这个短标识后，拼接成下载URL（例如/download/img-abc123），将该URL或短标识提供给用户。
• 用户访问该URL时，后端根据短标识查询到文件路径，直接返回文件流供下载。

前端上传示例（简化） #

async function uploadFile(file) {
  const formData = new FormData();
  formData.append('image', file);
  const res = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
  const { shortId } = await res.json();
  // 保存shortId或拼接成下载URL：`/download/${shortId}`
  return `/download/${shortId}`;
}

方案2：使用Object URL（临时下载） #

如果只需要给用户提供临时下载链接（比如购买后立即下载，关闭页面即失效），可以用浏览器原生的URL.createObjectURL：

• 生成的URL格式类似blob:http://your-domain/xxxx-xxxx-xxxx，长度很短，无需存入数据库。
• 注意：使用后要调用URL.revokeObjectURL释放内存，避免内存泄漏。

替代原函数的代码 #

const get_file_url = (file: File) => {
  const url = URL.createObjectURL(file);
  // 可选：在合适时机（比如下载完成后）释放URL
  // setTimeout(() => URL.revokeObjectURL(url), 60000);
  return Promise.resolve(url);
};

方案3：文件哈希标识（延迟上传/本地复用） #

如果不想立即上传文件到后端，可以先在前端生成文件的唯一哈希值（比如SHA-256）：

• 将哈希值存入数据库作为文件的唯一标识，无需存储长字符串。
• 用户后续需要下载时，前端将哈希传给后端，后端根据哈希找到对应文件返回；若文件存在前端本地存储（如IndexedDB），则直接用哈希找到文件后生成Object URL。

前端生成文件哈希示例 #

async function getFileHash(file: File): Promise<string> {
  const arrayBuffer = await file.arrayBuffer();
  const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

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