web-dev-qa-db-ja.com

React Nativeで画像をFirebaseにアップロードする

コンポーネントの状態に2つの画像パスがあります

enter image description here

関数内の画像の1つをアップロードしようとすると、エラーが発生します。

Firebase Storage: Invalid argument in 'put' at index 0: Expected Blob or file

そして私の機能

submitImages = () => {

    // Upload images to Firebase storage
    let user = firebaseAuth.currentUser;
    let imagesRef = storageRef.child('productImages/' + user.uid);
    imagesRef.put(this.state.imageFront).then(snapshot => {
        console.log('Uploaded ' + this.state.imageFront);
    });
}

これらの画像をFirebaseに取り込むには、代わりに何をすべきですか？ありがとう！

firebasereact-nativefirebase-storage
6
maxwellgover

エラーが言うことは、ブロブを使用する必要があるということです。あなたはreact-native-fetch-blobを使うことができます： https://github.com/wkh237/react-native-fetch-blob

この例を確認してください： https://github.com/dailydrip/r​​eact-native-firebase-storage/blob/master/src/App.js#L43-L69

11
Franzé Jr.

これは私にとって少しイライラさせられたので、私は自分のコードを投稿しています：

画像をfirebase.storageにアップロードするには、画像をBlobとしてアップロードする必要があります。 Blobが何であるかがわからなくても心配しないでください。[〜＃〜] blob [〜＃〜]は[〜＃〜] b [〜＃〜] inary [〜＃〜] l [〜＃〜] arge [〜＃〜] ob [〜＃〜] ject。

ステップ1。

npm install --save react-native-fetch-blob

ステップ2。

// copy and paste this code where you will handle the file upload

import RNFetchBlob from 'react-native-fetch-blob'

const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

ステップ3。

// The uploadImage function that you are going to use:

function uploadImage(uri, mime = 'image/jpeg', name) {

  return new Promise((resolve, reject) => {
    let imgUri = uri; let uploadBlob = null;
    const uploadUri = Platform.OS === 'ios' ? imgUri.replace('file://', '') : imgUri;
    const { currentUser } = firebase.auth();
    const imageRef = firebase.storage().ref(`/jobs/${currentUser.uid}`)

    fs.readFile(uploadUri, 'base64')
      .then(data => {
        return Blob.build(data, { type: `${mime};BASE64` });
      })
      .then(blob => {
        uploadBlob = blob;
        return imageRef.put(blob, { contentType: mime, name: name });
      })
      .then(() => {
        uploadBlob.close()
        return imageRef.getDownloadURL();
      })
      .then(url => {
        resolve(url);
      })
      .catch(error => {
        reject(error)
    })
  })
}

では、この関数をどのように呼び出すのですか？画像のURIを最初の引数として渡します。私の場合はimg1, img2, img3で、アップロードしたい画像のURIを指す変数が電話にありました。 '/Phone/Pics/imageToUpload.jpeg'などのように見えました。

2番目の引数として'image/jpeg'を渡すことができ、最後の引数は画像に付ける名前です。好きな名前を選んでください。

しかし、ウォルターにはいくつかの画像があり、それらをアップロードして、アップロードを正しく処理したいと考えています。 1つのアップロードが成功し、他のアップロードが成功しない場合はどうなりますか？

次にこれを行います：

let imgPromises = [];
imgPromises.Push(uploadImage(img1, 'image/jpeg', 'imageOne'));
imgPromises.Push(uploadImage(img2, 'image/jpeg', 'imageTwo'));
imgPromises.Push(uploadImage(img3, 'image/jpeg', 'imageOne'));

Promise.all(imgPromises).then(urls => {
  // ALL IMAGES SUCCEEDED and you will get an array of URIS that you can save to your database for later use!
}).catch(error => {
  // One OR many images failed the upload. Give feedback to someone.
})
8
Walter Monecke

これまでのところ、これは、ファイル/イメージをReact NativeでFirebase Storageにアップロードするために見つけた最良の方法です。この方法は、Expo SDK以外のサードパーティライブラリを使用しません。

  1. アップロードする画像のファイルURIを取得します。これを行うには、 Expo ImagePicker を使用する必要があります。このコードブロックを含めるのに最適な場所は、onPressハンドラーを備えたボタンの上です。

    ImagePicker.launchImageLibraryAsync({ 
  mediaTypes: "Images"
}).then((result)=>{ 

  if (!result.cancelled) {
    // User picked an image
    const {height, width, type, uri} = result;
    return uriToBlob(uri); // will follow later
  }

})

  2. 画像URIからBLOBを生成します。これを行うのに役立つサードパーティのライブラリがたくさんあります。ただし、ライブラリをインストールしたくない場合は、 XMLHttpRequest を使用できます。 Reactネイティブドキュメント Fetch APIの使用をお勧めします ですが、フェッチしかできないというエラーがスローされるため、現在は使用できませんhttps:// urls、ただし、URIはfile://。これを渡す方法はありますが、XMLHttpRequestを使用すると、処理が非常に簡単になります。

    uriToBlob = (uri) => {

return new Promise((resolve, reject) => {

  const xhr = new XMLHttpRequest();

  xhr.onload = function() {
    // return the blob
    resolve(xhr.response);
  };

  xhr.onerror = function() {
    // something went wrong
    reject(new Error('uriToBlob failed'));
  };

  // this helps us get a blob
  xhr.responseType = 'blob';

  xhr.open('GET', uri, true);
  xhr.send(null);

});

}

  3. BLOBがあります。Firebaseにアップロードしましょう。Firebase Docs で説明されているように、この部分は非常に簡単です。

    uploadToFirebase = (blob) => {

return new Promise((resolve, reject)=>{

  var storageRef = firebase.storage().ref();

  storageRef.child('uploads/photo.jpg').put(blob, {
    contentType: 'image/jpeg'
  }).then((snapshot)=>{

    blob.close(); // let's free up the blob

    resolve(snapshot);

  }).catch((error)=>{

    reject(error);

  });

});


}

これで、Firebase Storageにファイルをアップロードできるようになりました。これの重要な部分は、ファイルURIを取得してBLOBに変換することです。このメソッドの詳細については、 ここ を参照してください。

6
Jo E.

React-native-firebaseを使用して画像をstorgeにアップロードできます https://rnfirebase.io/

const storage = firebase.storage();
const sessionId = new Date().getTime();
const imageRef = storage.ref('images').child(`${sessionId}`);
return imageRef.putFile(uri);
6
Eris Mabu

しばらくの間、私は Firebase JS SDK with React Nativeを使用しました。このスレッドを参照するには、このライブラリを使用する場合、 rn -fetch-blob （react-native-fetch-blobはもう維持されていません）、Firebase Storage put（）メソッドにblobを提供します。

最近、私は React Native Firebase を使い始めました。彼らが彼らのウェブサイトで言うように、「ReactでネイティブFirebase SDKを使用すると、ネイティブFirebaseを使用すると、Firebase JS SDKに存在しないデバイスSDKを使用できます」。

React-Native-Firebaseを使用すると、Firebase Storageに画像をアップロードするための追加のライブラリは不要であり、コードがよりクリーンになります。

export const uploadImage = (path, mime = 'application/octet-stream') => {
  return new Promise((resolve, reject) => {
    const imageRef = firebase.storage().ref('images').child('filename.jpg');

    return imageRef.put(path, { contentType: mime })
      .then(() => {
        return imageRef.getDownloadURL();
      })
      .then(url => {
        resolve(url);
      })
      .catch(error => {
        reject(error);
        console.log('Error uploading image: ', error);
      });
  });
};
0
djmartins

cloudinaryを使用しても構わない場合は、アップロードする方法を示し、アップロードされたURLを取得してfirebaseに保存します https://medium.com/@ifeoluwaking24/how-to-upload-an-image-in -expo-react-native-to-firebase-using-cloudinary-24aac981c87

また、スナックを試すこともできますが、必ずcloud_nameとupload_presetを追加してください https://snack.expo.io/@ifeking/upload-to-cloudinary

0
ifeoluwa king