2017-10-20 10 views
0

Expo(React Native)から取得した画像を保存するのに苦労しています。ReactNative/Expo ImagePickerから選択した画像をBaqendに保存する

https://docs.expo.io/versions/latest/sdk/imagepicker.html

ネイティブのブロブとして選択した画像をアップロードするためのサポートはありませんが、base64でオプションが用意されていない反応するようです。

コード:

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


_handleImagePicked(pickerResult) { 
    const uri = pickerResult.base64; 
    const img = new db.File({ name: 'test.jpg', data: uri, type: 'base64', mimeType: 'image/jpg' }); 

    db.UserData.load(this.state.UserDataID).then(UserData => { 
     img.upload({ force: true }).then((file) => { 
      UserData.photo = "https://remarkable-apple-95.app.baqend.com/v1" + file.id; 
      alert(file.id) 
      return UserData.update(); 
     }, 
      (error) => { alert(error); } 
     ); 
    }); 
} 

私はconsole.log(pickerResult.base64)私はBASE64のように見えますが、これは実行されると、img.uploadがエラーを投げているし、それが"PersistentError: An unexpected persistent error occurred."

答えて

1

を言う超長い文字列を取得するときに」もう一度。 React Nativeはバイナリデータをサポートしていません。残念ながら、Baqendはまだbase64ファイルのアップロードをサポートしていません。

  1. はの制限は、ネイティブがネイティブコードで直接ファイルをアップロードし、ダウンロードしてバイナリファイルをサポートし、参照をバック与えないリアクトバイパスReact Native Fetch Blobライブラリを使用します:あなたは2つのオプションを持っている回避策として

    それらに。あなたのコードは次のようになります:

    ImagePicker.showImagePicker(options, async (response) => { 
        const upload = new db.message.UploadFile('files', 'uploadFetchBlob.jpg') 
        const body = 'RNFetchBlob-' + response.uri; 
        RNFetchBlob.fetch('PUT', 'https://{YOUR-APP-NAME}.app.baqend.com/v1' + upload.request.path, upload.request.headers, body).then((res) => { 
         db.File({ parent: 'files', name: 'uploadFetchBlob.jpg'}).url 
        }) 
    }); 
    

残念ながら今博覧会のクライアントでこの文句を言わない仕事、しかし、あなたのプロジェクトを取り出すと「ネイティブコード」を使用する必要があると思います。

  1. 2番目のオプションは、baqendファイルエンドポイントを直接使用するのではなく、base64文字列をbaqendモジュールにアップロードすることです。ここでbase64文字列を解析し、バックエンドモジュール内からファイルにアップロードできます。この例は、ガイドの例で見つけることができます。 https://www.baqend.com/guide/topics/baqend-code/#handling-binary-data

が、これは

を役に立てば幸い
関連する問題