如何修复照片上传错误到 Firebase 存储

Question

对于我的 react-native（我正在使用 expo）应用程序，我希望用户上传个人资料图片，该图片将存储在 firebase 存储中。为此，我使用了this example code 并为我的应用程序修改了它。但是，除非我处于调试模式，否则此示例对我不起作用。

我可以打开ImagePicker然后编辑照片，但是上传失败。

我发布了代码的快照。通过单击一个按钮，_pickImage() 被调用。

这个问题的原因可能是什么？我的建议是，在调试模式下，应用程序有更多时间来处理函数，因为在调试模式下，应用程序真的很滞后。

我对@9​​87654325@（以及一般的应用程序开发）非常陌生，对此我事先表示歉意！

非常感谢。

_pickImage = async () => {
    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    this._handleImagePicked(pickerResult);
  };

  _handleImagePicked = async pickerResult => {
    try {
      this.setState({ uploading: true });

      if (!pickerResult.cancelled) {
        uploadUrl = await uploadImageAsync(pickerResult.uri);
        this.setState({ image: uploadUrl });
      }
    } catch (e) {
      console.log(e);
      alert('Upload failed, sorry :(');
    } finally {
      this.setState({ uploading: false });
    }
  };
}

async function uploadImageAsync(uri) {
  // Why are we using XMLHttpRequest? See:
  // https://github.com/expo/expo/issues/2402#issuecomment-443726662
  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(xhr.response);
    };
    xhr.onerror = function(e) {
      console.log(e);
      reject(new TypeError('Network request failed'));
    };
    xhr.responseType = 'blob';
    xhr.open('GET', uri, true);
    xhr.send(null);
  });

  const ref = firebase
    .storage()
    .ref()
    .child(uuid.v4());
  const snapshot = await ref.put(blob);

  // We're done with the blob, close and release it
  blob.close();

  return await snapshot.ref.getDownloadURL();
}

Answer 1

我的更新代码

import { ImagePicker } from 'expo';
import { RNS3 } from 'react-native-aws3';
YellowBox.ignoreWarnings(['Setting a timer']);
var _ = require('lodash');
    .
    .
    .
componentDidMount(){
      this.firebaseRef = firebase.database().ref('newsfeed')
      this.firebaseRef.on('value', snap => {
        const newsfeed = snap.val()
        const newNewsfeed = _.reverse(_.values(newsfeed));
        this.setState({ postList: newNewsfeed, loadingPost: false })
      })
  }
  async onAddPhoto(){
    let result = await ImagePicker.launchImageLibraryAsync({
     allowsEditing: true,
     aspect: [4, 3],
   });

   if (!result.cancelled) {
     this.setState({ photo: result.uri });
     options["contentType"] = result.type

   }

  }
  onPressPost(){
    this.setState({ loading: true})
    const _this = this
    let post = {}
    post["id"] = firebase.database.ServerValue.TIMESTAMP
    post["text"] = this.state.text
    if(this.state.photo){
      const uri = this.state.photo
      const ext = uri.substr(uri.lastIndexOf('.') + 1);
      const name = Math.round(+new Date()/1000);
      let file = {
        name: name+"."+ext,
        type: "image/"+ext,
        uri
      }

      RNS3.put(file, options).then(response => {
          if(response.status === 201){
            post["photo"] = response.body.postResponse.location
            firebase.database().ref('newsfeed').push(post)
            _this.setState({ text: '', photo: null, loading: false})
          }
      });

    }else {
      firebase.database().ref('newsfeed').push(post)
      _this.setState({ text: '', photo: null, loading: false})
    }

  }

• 链接地址：http://nobrok.com/file-upload-with-expo-and-firebase/