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

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

問題

今、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は闇が深い・・・

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

ではでは。

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。