将图像从 React Native 上传到 Firebase 存储

Question

我使用 React Native Image Picker Library 从手机图库中获取图像，这些图像采用 base64 格式，当我尝试将它们上传到 firebase 存储时，它们不显示，我尝试了各种解决方案，但它们都不起作用是：

                    const response = await fetch(result.assets[0].uri)
                    const blob = response.blob()

                    uploadBytes(imgRef, blob).then((snapshot)=>{
                        getDownloadURL(ref(storage, result.assets[0].fileName))
                        .then((url) => {
                            url_ = url;
                            userDetails.update_details("image_1", url_);
                        })
                    })

这个存储一个八位字节流

                    const binaryData = Buffer.from(result.assets[0].base64, "base64");
                    const blob = new Blob([binaryData], { type: 'image/png' });

                    uploadBytes(imgRef, blob).then((snapshot)=>{
                        getDownloadURL(ref(storage, result.assets[0].fileName))
                        .then((url) => {
                            url_ = url;
                            userDetails.update_details("image_1", url_);
                        })
                    })

这会将图像保存为 png，但它不会在 firebase 控制台上打开。

Answer 1

我没有测试你的代码，但我可以看到你错过了 Promises 链中的返回：

uploadBytes(imgRef, blob)
  .then((snapshot) => {
    return getDownloadURL(ref(storage, result.assets[0].fileName));   // <==
  })   // <==
  .then((url) => {
    url_ = url;
    userDetails.update_details("image_1", url_);
  });

如链接文档中所述：

始终返回结果，否则回调将无法捕获结果 之前的承诺.

Answer 2

使用 React Native 将 Base64 格式的图像上传到 Firebase Storage 时，需要注意一些常见的陷阱。让我们一步步分解这个过程：

1. 将 URI 转换为 Blob： 您需要将图像 URI（从图像选择器获取）转换为 blob。这是必要的，因为 Firebase Storage 需要上传 blob 或文件。

2. 上传到 Firebase 存储： 获得 Blob 后，您可以继续将其上传到 Firebase 存储。

3. 检索下载网址： 上传完成后，如果您想稍后访问或显示图像，您应该检索下载 URL。

以下是实现此目的的更详细方法：

import storage from '@react-native-firebase/storage';
import { Platform } from 'react-native';

async function uploadImage(uri, fileName) {
  try {
    // Convert image uri to blob
    const response = await fetch(uri);
    const blob = await response.blob();

    // Create a reference to Firebase Storage
    const ref = storage().ref(fileName);

    // Upload the blob to Firebase Storage
    const taskSnapshot = await ref.put(blob);

    // Get the download URL
    const downloadURL = await taskSnapshot.ref.getDownloadURL();
    console.log('Image URL:', downloadURL);
    return downloadURL;
  } catch (error) {
    console.error("Upload error:", error);
    throw error;
  }
}

// Usage:
const imageUri = result.assets[0].uri;
const fileName = result.assets[0].fileName || 'imageFileName.png'; // Ensure there's always a fallback name
uploadImage(imageUri, fileName)
  .then(url => {
    console.log("Image uploaded successfully:", url);
    userDetails.update_details("image_1", url);
  })
  .catch(error => {
    console.error("Failed to upload image:", error);
  });

注释：

1. 确保您已授予使用图像选择器库读取图像所需的权限。
2. 检查 Firebase 存储规则，确保您拥有写入 Firebase 存储所需的权限。
3. 使用 Firebase 和 React Native 时，正确处理异步操作至关重要。

   async/await

   模式在这里很有用。
4. 确保您在 blob 中设置的内容类型与图像的实际内容类型匹配。
5. 上传图片后，您可以在 Firebase 控制台中检查 Firebase Storage 以验证上传。确保上传文件的 MIME 类型和其他属性看起来正确。
6. 要显示图像，请直接在

   <Image>

   组件的

   source

   属性中使用返回的下载 URL。
7. 记住优雅地处理错误。 Firebase 上传可能会因各种原因而失败，包括网络问题、配额限制或存储规则。始终捕获错误并在必要时向用户提供反馈。