JavaScript如何获取文件URL数据？base64太长有无更短替代方案？

最优替代方案：使用URL.createObjectURL() #

你不需要将文件转为base64格式，直接使用浏览器原生的URL.createObjectURL() API即可生成长度极短的临时访问链接，完全可以满足本地文件预览的需求。

优化后的JS代码

function previewFile() {
  const preview = document.getElementById('video1');
  const file = document.querySelector('input[type=file]').files[0];

  if (file) {
    // 直接生成临时blob链接，无需编码转换
    const fileUrl = URL.createObjectURL(file);
    preview.src = fileUrl;

    // 视频加载完成后释放临时链接，避免内存泄漏
    preview.addEventListener('loadeddata', function() {
      URL.revokeObjectURL(fileUrl);
    }, { once: true });
  }
}

HTML代码（无需修改）

<input type="file" onchange="previewFile()"><br>

<video width="320" height="240" id="video1" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

该方案的核心优势：

• 生成的链接长度仅数十个字符，不存在base64字符串过长的问题
• 无需读取全量文件做base64编码，大体积视频的预览加载速度提升非常明显
• 内存占用远低于base64方案，主动调用URL.revokeObjectURL()后可以完全释放占用的临时资源

注意：该方案生成的blob链接仅在当前页面上下文有效，无法跨页面使用、也不能持久化存储。如果后续需要将文件上传到服务端，直接提交原始的File对象即可，不需要做额外格式转换。

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