【ReactNative開発】Fetch APIで画像をアップロードしようとするとNetwork request failedエラーが発生する

本日3本目のトラブルシューティングはこちらの問題です。いやーつまった・・・。

問題

前提

  • React Native + Type Script + Expo
  • Android エミュレータでデバッグ

今、React Nativeで画像をアップロードする機能を作っているのですが、この機能をAndroidエミュレータでテストすると、以下のようなエラーが発生しました。

Network request failed
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
at [native code]:null in callFunctionReturnFlushedQueue

コードはこちら。ファイルをformDataとして、Bodyにセットしてアップロードしようとしています。

const formData = new FormData();

formData.append('image',{
        uri: imageUri,
        type: image,
        name: ファイル名
});

    const url = 'APIのURL'
    await fetch (url, {
        method: 'POST',
        headers:{
           XXXXXXX
        },
        body:formData
    })
    .then((response) => {
        return response.text()
        } 
    )
    .then((data)=>{
        console.log("## CALL UPLOAD BLOB :API SUCCESSUFLLY CALLED")
    })
    .catch((error) => {
        console.log("## CALL UPLOAD BLOB :API CALL FAILED")
        console.log(error);
    })

原因と解決方法

送信のフォーマットがよくなかったみたいです。最終的に、以下のサイトで紹介されていた実装にすることで解決できました。私の場合、ファイルのパスは問題なかったので、typeをmimeというやつで設定し直しただけなのですが、こいつが悪さをしていたみたいです。

Network Request Failed while uploading image to server – Help: Expo Go – Forums

また、今回の場合は違いましたが、このエラー、ReactNative >0.62以上の場合にも発生しうるようです。こちらの状況に該当する場合は、Androidパッケージのコードの一部をコメントアウトするというだいぶトリッキーな方法が必要なようです。

Photo upload on React Native Android produce Type Error Network Error – Stack Overflow

React Nativeは闇が深い・・・

正直この動作についてあまり深く理解できていないので、また知見が深まったら追記しようと思います。

ではでは。

この記事を気に入っていただけたらシェアをお願いします!

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。