Firebase 存储 - 使用 React Native 上传图像，加载预览时出错答案

【问题标题】：Firebase Storage - Upload Image with React Native, Error loading PreviewFirebase 存储 - 使用 React Native 上传图像，加载预览时出错
【发布时间】：2021-08-11 20:20:21
【问题描述】：

这是我用来将图片上传到 Firebase 存储的代码

const filename = image.substring(image.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? image.replace('file://', '') : image
var metadata = {
  contentType: 'image/jpeg',
};
const task = firebase.storage().ref().put(uploadUri, metadata)
try {
 await task
} catch(err) {
 console.log(err)
}

但是当我检查它显示的 firebase 控制台时，加载预览时出错，并且图像的文件大小为 9B。有什么我想念的吗。

我正在使用 Expo 管理的 expo-image-picker 来选择图像。

【问题讨论】：

您在从expo-image-picker 获取图片时遇到任何问题。我一选择图像，我的应用就会重新启动。
不，expo-image-picker 工作正常

标签： javascript firebase react-native expo firebase-storage

【解决方案1】：

改成这个

const filename = image.substring(image.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? image.replace('file://', '') : image

let formData = new FormData();
formData.append("image", {
   name: filename,
   type: 'image/jpeg',
   uri: uploadUri
})

var metadata = {
  contentType: 'image/jpeg',
};

const task = firebase.storage().ref().put(formData, metadata)
try {
 await task
} catch(err) {
 console.log(err)
}

【讨论】：

不起作用，加载预览仍然出错，文件大小为9B

【解决方案2】：

我找到了一种方法，我必须创建一个 blob，然后将该 blob 上传到 firebase

    const filename = image.substring(image.lastIndexOf('/') + 1);

    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(xhr.response);
      };
      xhr.onerror = function() {
        reject(new TypeError("Network request failed"));
      };
      xhr.responseType = "blob";
      xhr.open("GET", image, true);
      xhr.send(null);
    });
    const ref = firebase
      .storage()
      .ref()
      .child(filename);
      
    const task = ref.put(blob, { contentType: 'image/jpeg' });

    task.on('state_changed', 
      (snapshot) => {
        console.log(snapshot.totalBytes)
      }, 
      (err) => {
        console.log(err)
      }, 
      () => {
        task.snapshot.ref.getDownloadURL().then((downloadURL) => {
          console.log(downloadURL);
      });
    })

【讨论】：