如何将视频上传到 Firebase Storage for React App

Question

我正在开发一个非常类似于社交媒体应用程序的 React 项目，用户可以在其中上传图片或视频。我正在使用 Firebase 存储来存储图像和视频。

我可以通过使用 react-firebase-file-uploader 包来完成图像上传，但是由于我是 Web 开发的新手，我正在努力寻找上传视频以进行反应的解决方案。

我已经搜索了整个互联网，但找不到合适的解决方案来完成这些任务。

1. 我只需要上传视频并希望在将数据上传到 Firebase 存储之前对其进行预览。

2. 我需要在上传之前或使用云功能上传到 Firebase 存储之后压缩视频以减小文件大小。

非常感谢您的帮助。

Answer 1

可能值得再次说明的是视频文件are compressed by default。如果有的话，您可以调整文件大小以降低分辨率，或对其进行处理以添加水印。

这是一个answer，描述了如何调整视频文件的大小。而here 是一个关于如何在 Cloud Functions 上使用moviepy 的教程。

Answer 2

你可以试试这个

<input type = "file"
onChange = {
  (e) => {
    let videoObj = e.currentTarget.files[0];
    // console.log(videoObj)
    let {
      name,
      size,
      type
    } = videoObj;

    size = size / 1000000
    //for not uploading the file more than 10 MB
    if (size > 10) {
      alert("please upload file less than 10 MB");
      return;
    }

    //code for only uploading the video

    type = type.split("/")[0];

    if (type != "video") {
      alert("please upload video only");
      return;
    }
  }
}
/>

Answer 3

你应该看看这个教程here和这个要点there

您可以在上传后使用 Cloud Functions 进行一些处理，但请注意内存和执行时间受到限制，您的脚本可能会在大文件上失败。