时间戳

首页 > 解决方案 > 尝试将 blob 上传到 Firebase 存储时出错（React Native）

javascript - 尝试将 blob 上传到 Firebase 存储时出错（React Native）

问题描述

我的 React-Native 应用程序中有一个图像选择器组件，允许用户选择图像。然后将其保存到 this.state.imageUri。我的目标是将图像上传到 Firebase 存储，然后将其链接到实时数据库，以便可以针对特定列表项对其进行访问。我为此使用了两个功能：

uriToBlob = (uri) => {
    console.log('uri: ' + uri)
    return new Promise(function(resolve, reject) {
      try {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", uri);
          xhr.responseType = "blob";
          xhr.onerror = function() {reject("Network error.")};
          xhr.onload = function() {
              if (xhr.status === 200) {resolve(xhr.response)}
              else {reject("Loading error:" + xhr.statusText)}
          };
          xhr.send();
      }
      catch(err) {reject(err.message)}
    })
  }

和

uploadToFirebase = (blob) => {
    console.log('uploading to firebase')
    return new Promise((resolve, reject)=>{
      var storageRef = firebase.storage().ref();
      storageRef.child('uploads/photo.jpg').put(blob, {
        contentType: 'image/jpeg'
      }).then((snapshot)=>{
        blob.close();
        resolve(snapshot);
      }).catch((error)=>{
        reject(error);
      });
    });
  }

按下按钮后，我运行以下代码：

this.uriToBlob(this.state.imageUri).then(function(blob) {
      return this.uploadToFirebase(blob)
    });

但是，我总是得到错误

[未处理的承诺拒绝：TypeError：未定义不是对象（评估'this.uploadToFirebase'）]

我以前没有使用过 Firebase 存储或 blob，所以我非常感谢一些关于为什么这不起作用的见解。谢谢！

标签： javascriptfirebasereact-nativeexpofirebase-storage

解决方案

问题出在此处：

this.uriToBlob(this.state.imageUri).then(function(blob) {
  return this.uploadToFirebase(blob)
});

您没有使用箭头功能，因此“this”实际上不是您要查找的上下文（来自父范围的上下文）。

你应该这样做：

this.uriToBlob(this.state.imageUri).then((blob) => {
  return this.uploadToFirebase(blob);
});

推荐阅读