Zenn
☕

Androidからファイルを送信できない [Network request failed]

2022/03/20に公開
Android
iOS
React Native
Expo
#
mime
tech

問題内容

Expoでスマホからサーバーに画像送信する機能を実装中に発生

iOSでexpo-image-pickerで画像選択して、サーバーに送信完了！！
動作問題なし！
↓
Androidでもできると思い動作確認！
エラー発生！ Error: Network request failed
え...なんで？？　Network？？

今後もAndroidだと動かないみたいなところは発生しうるので
対応方法を備忘として残します。

環境

ReactNative(Expo)
Expo SDK v44

問題箇所と対応

formDataのtypeを明記しないとエラーが発生するっぽい。(動作確認はしていない)
type: "file" or "image"で指定してformDataを実装していたが、iOSでは問題なくAndroidではエラーが発生することがわかった。
以下記事を参考にmime typeを使って実装する方法で対応しました。

const formData = new FormData();
formData.append("data", {
     uri: fileItem.uri,
     name: fileItem.uri.split("/").pop(),
-    type: "file",
+    type: mime.getType(fileItem.uri),
});

参考サイト

https://forums.expo.dev/t/network-request-failed-while-uploading-image-to-server/30737

使用ライブラリ

https://www.npmjs.com/package/mime

最後に

本来はfileやimageで指定していたことがよくない気もしますが、ネイティブアプリの開発経験がなくOS毎にファイルタイプが違うだろうなぁ。わかんねえぁ。曖昧にしとこうかなぁ。くらいの気持ちだったので反省...

mimeについてもあまり理解している訳でもないのでこの辺を理解して今後の実装時には配慮してよりよく実装していきたい。

Discussion