在 React Native Expo 中不使用 blob 将图像上传到 Firebase 存储

Question

我目前正在尝试将文件上传到 firebase 存储，而不使用 blob 或尝试找到解决我的问题的另一种解决方法。

在我的托管 React Native 项目中，我使用 expo-image-picker 来选择图像。之后，我根据图像的大小使用 expo-image-manipulator 缩小图像（确切的实现并不那么重要）。

我正在使用

response.blob()

获取一个 blob，我可以将其上传到 firebase，但 iOS 上的文件大小是原来的四倍。因此我正在寻找另一种上传图像的解决方案。

图片正在上传到 firebase 存储，如下所示：

const picture = "file:///file/path";
const randomId = uuidv4();
const response = await fetch(picture);
const blob = await response.blob();

const path = `images/${randomId}`;
const storage = getStorage();

const metadata = {
  contentType: "image/jpeg",
};
const imagesRef = ref(storage, path);
const uploadTask = uploadBytesResumable(imagesRef, blob, metadata);
// Listen for state changes, errors, and completion of the upload.
uploadTask.on(
  "state_changed",
  (snapshot) => {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log("Upload: " + progress + "% ");
    switch (snapshot.state) {
      case "paused":
        console.log("Upload is paused");
        break;
      case "running":
        console.log("Upload is running");
        break;
    }
  },
  (error) => {
    console.log(
      "Error uploading document (CreatePostDetailsScreen): ",
      error
    );
  },
  () => {
    // Upload completed successfully, now we can get the download URL
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log("File available at", downloadURL);
    });
  }
);

非常感谢任何帮助。

Answer 1

您应该能够使用 Expo operableAsync() 获取图像的 base64 字符串并使用 uploadString 上传到 firebase。

const getbase64 = async (image) => {
  const manipResult = await manipulateAsync(file.localUri, [], {
    compress: 0.2,
    format: SaveFormat.PNG,
    base64: true,
  });
  return manipResult.base64;
};

然后使用...

const base64 = getbase64(image) /// function from above code block.

await uploadString(storageRef, base64, 'base64').then((snapshot) => {
  console.log('Uploaded a base64 string!');
});

您可以使用上传字符串上传“raw”、“base64”、“base64url”和“data_url”字符串。如果没有提供字符串类型，它将默认为原始。

我确信您已经阅读了它们一百万次，但这里是用于将文件作为字符串上传的文档。

https://firebase.google.com/docs/storage/web/upload-files#upload_from_a_string

但是，我不确定您是否还会面临文件过大的问题。

Answer 2

这对你有用吗？ @asaraspo 你还记得你做了什么吗？我遇到了类似的问题，Android 运行良好，但 iOs 处理 blob 的时间太长。