React Nativeで画像ファイルのアップロード

https://hacknote.jp/archives/27471/

に関連する内容です。

react-native-fetch-blob と react-native-image-picker とを利用して

• 画像を選択してアップロード
• カメラで画像を撮影してアップロード

する時のパターンです。

検証環境

react-native-image-picker: 0.26.3

react-native-fetch-blob： 0.10.5

Android: 6.0.0(API 23)

iPhone： 9.3.5

の検証環境になります。

Androidカメラ

ImagePicker.launchCameraのレスポンス

  "path": "/storage/emulated/0/Pictures/image-XX.jpg",
  "uri": "content://your.app.name.provider/app_images/Pictures/image-XXX.jpg",

上記の path のパラメータを渡すようにします。

    const body = [
      {
        name: 'icon',
        filename: 'file.jpg',
        type: 'image/jpeg',
        data: RNFetchBlob.wrap(path),
      },

Android画像選択

ImagePicker.launchImageLibraryのレスポンス

  "path": "/storage/emulated/0/Download/serita_XXX.png",
  "uri": "content://media/external/images/media/112",

上記の path のパラメータを渡すようにします。

    const body = [
      {
        name: 'icon',
        filename: 'file.jpg',
        type: 'image/jpeg',
        data: RNFetchBlob.wrap(path),
      },

iOSカメラ

ImagePicker.launchCameraのレスポンス

 uri: 'file:///var/mobile/Containers/Data/Application/XXX/Documents/images/XXX.jpg',

上記の uri のパラメータから file:// のprefixを削除したものを渡すようにします。

    const body = [
      {
        name: 'icon',
        filename: 'file.jpg',
        type: 'image/jpeg',
        data: RNFetchBlob.wrap(uri.replace('file://', '')),
      },

iOS画像選択

ImagePicker.launchImageLibraryのレスポンス

origURL: 'assets-library://asset/asset.JPG?id=XXX&ext=JPG',
uri: 'file:///var/mobile/Containers/Data/Application/XXX/Documents/images/XXX.jpg',
path: undefined

上記の origURL のパラメータを渡すようにします。

    const body = [
      {
        name: 'icon',
        filename: 'file.jpg',
        type: 'image/jpeg',
        data: RNFetchBlob.wrap(origURL),
      },

参考

https://github.com/wkh237/react-native-fetch-blob/issues/287

https://github.com/facebook/react-native/issues/5308

https://github.com/wkh237/react-native-fetch-blob/issues/338