将视频上传到 Firebase 存储时，iOS 上的 Expo 应用程序崩溃。适用于Android，而不是iOS答案

【问题标题】：Expo application on iOS crashes when uploading video to Firebase Storage. Works on android, just not iOS将视频上传到 Firebase 存储时，iOS 上的 Expo 应用程序崩溃。适用于Android，而不是iOS
【发布时间】：2022-01-06 06:16:03
【问题描述】：

我正在尝试将视频上传到 iOS 上的 Firebase 存储。 Android 工作得很好。这是导致它的代码（代码中有 cmets 以显示它何时崩溃）。另外，我使用的是我自己的 iPhone 进行测试，而不是模拟器。

export const mediaUpload = async (imageObject) => {
  // getting blob from a local file a user uploads from ImagePicker
  const blob = await fetch(imageObject[0].uri);
  const blobObject = await blob.blob();

  // creating reference path in storage
  const fileRef = ref(storage, `${auth.currentUser.uid}/videos/${uuid.v4()}`);
  // ----- no crash so far... -------

  // this is the issue line
  const attemptToUpload = await uploadBytes(fileRef, blobObject);
  // ------> APP CRASHES
}

在 Android 上，这适用于图像和视频。在 iOS 上，图像可以工作，但视频会使应用程序完全崩溃。 blob 类型是视频/快速时间。为什么 uploadBytes 方法会导致应用崩溃？

编辑：答案是 Firebase v9 在处理视频上传到存储 100% 方面似乎与 Expo 不兼容。甚至 android 在没有任何错误消息的情况下挂起视频上传。我解决这个问题的方法是回到 Firebase 8.10.0 版本。这 100% 有效。

【问题讨论】：

标签： javascript ios firebase react-native expo

【解决方案1】：

使用这种方法并且在 iOS 15 上运行良好。


 const videoRef = firebase.storage().ref("video/filename");

  const metadata = { contentType: "video/mp4" };

  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.onload = function () {
      resolve(xhr.response);
    };

    xhr.ontimeout = function (e) {
      // XMLHttpRequest timed out. Do something here.

      console.log(e);
    };
    xhr.onerror = function (e) {
      console.log(e);

      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", fileUri, true);
    xhr.timeout = 1000 * 60;
    xhr.send(null);
  });


  var uploadTask = videoRef.put(blob, metadata);

 

  uploadTask.on(
    "state_changed",
    (snapshot) => {
      // Observe state change events such as progress, pause, and resume
      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
      const progress = snapshot.bytesTransferred / snapshot.totalBytes;

    

      switch (snapshot.state) {
        case firebase.storage.TaskState.PAUSED: // or 'paused'
          console.log("Upload is paused");
          break;
        case firebase.storage.TaskState.RUNNING: // or 'running'
          console.log("Upload is running");
          break;
      }
    },
    (error) => {
      console.log(error);

      // Handle unsuccessful uploads
      blob.close();
    },
    () => {
      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
      uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {


console.log("Video file save at:",downloadURL)
       
      });
      blob.close();
    }
  );

【讨论】：

所以我只是在我的代码中尝试了这个，一个区别是我使用的是 firebase v9。但是当我使用 uploadBytesResumable() （这只是新的 .put() ）时，应用程序在上传过程中以随机百分比崩溃。
V9 是否会出现新的兼容性问题？切换到 V8 的成本有多大。 V9 还提供了与 V8 的向后兼容性。您可以在 V9 中使用 V8 功能。 firebase.google.com/docs/web/…
我在一个示例应用程序中将我的版本更改为 8.10 并运行代码，完美运行。所以基本上firebase v9和expo必须有你所说的某种兼容性问题。有时甚至 android 也不会处理进度 %。狂野...谢谢朋友！

【解决方案2】：

我认为这是 ios 平台上的一个已知问题，当时 body 只是一个 blob。几周前我遇到了同样的问题，我通过将它发送到我的后端然后上传到需要它的服务来解决它。

【讨论】：

那么奇怪的是，如果我在使用 ImagePicker 获取图像后保存我的代码，图像上传正常，但如果您再次尝试上传图像，它会中断。我认为世博会没有兑现的承诺正在发生一些事情。

【解决方案3】：

我也遇到了同样的问题，在firebase 9.6.5版上，上传图片时，我使用了uploadBytesResumable函数而不是uploadBytes，它工作得很好，如果紧急你可以暂时使用那个函数，只是一个建议，供参考：- https://firebase.google.com/docs/storage/web/upload-files

我仅在 iOS 15 和 15 + 中遇到此问题，其余版本低于 iOS 15 并且在 Android 应用程序中 uploadBytes 工作正常。

当使用带有 uploadBytesResumable 的 XMLHttpRequest 时，第一次图像在 iOS 15.2 上可以顺利上传，然后在第二次上传时，上传图像时出现崩溃。为避免使用，

const img = await fetch(image_url);
const blob = await img.blob();

因此，如果您在上传图片时遇到任何问题，请使用此方法创建 blob 文件

如果您需要参考代码，我已经回答了另一个关于图像上传错误（firestorage）的问题， React Native expo image picker upload image to firebase storage (v9) crash

【讨论】：