2

虽然，我在 web 开发方面服务了很多年，但我不得不承认我真的不知道（大）文件上传实际上是如何工作的。所以我希望这个问题毕竟是有道理的。

在我的应用程序中，我将大型视频文件上传到 S3 存储桶。上传就像一个魅力，但因为我们不仅需要存储文件，还需要在数据库中存储有关文件的信息（例如视频持续时间），我正在寻找如何实现这一点。我正在使用 React，但我基本上onChange在标签上有一个处理程序<input />来获取文件对象

<input type="file" onChange={() => handleChange()} />

在handleChange()函数中，我将文件对象分配给状态变量

const handleChange = ( e: ChangeEvent<HTMLInputElement> ) {
  
  // TS checks and then assigning the file to a state variable
  if (event.target.files && event.target.files.length === 1) {
      setFile(event.target.files[0]);
  }
}

之后，我有一些其他处理程序来处理上传到 S3，但这一切正常。我感兴趣的是如何访问有关将要上传的文件的信息。特别是，我注意到在实际上传开始之前需要一些时间，并且我在浏览器的网络选项卡中看到了活动。那么，文件上传到哪里呢？是浏览器缓存吗？

在尝试查找有关正在发生的事情的更多信息后，我发现了有关如何从文件中提取视频持续时间的讨论，预上传。扩展后，handleChange我能够获得视频持续时间并将其分配给状态变量

const handleChange = ( e: ChangeEvent<HTMLInputElement> ) {
  
  // I have added !file since I don't want to create a feedback loop here
  if (event.target.files && event.target.files.length === 1 && !file) {
      setFile(event.target.files[0]);
      
      const vid = document.createElement("video");
      const fUrl = URL.createObjectURL(event.target.files[0]);
      vid.src = fUrl;
      vid.ondurationchange = () => {
        setDuration(vid.duration);
      };
  }
}

这很好用。当我这样做时，我意识到我在浏览器 的网络选项卡中看到了更多的活动。在此处输入图像描述

我假设这些条目是 blob ID object URL（这里我真的不知道我在说什么）。更详细地查看请求，我可以看到一个响应标头，Content Range我认为这对于在实际上传开始之前向用户显示“文件准备”过程是完美的。 在此处输入图像描述

我怎样才能访问这些信息？这里到底发生了什么？

谢谢！任何帮助表示赞赏！

4

0 回答 0