在Android上的React Native上的EXPO上获取请求失败 [英] Fetch request fails on expo on react native on android

问题描述

我使用提取将图像发送到服务器.在iOS上，everythin可以按预期工作，但在android上，我收到了Request flaled.
我从expo图像选择器获得的uri，在IOS上一切正常.

I use fetch sending image to a server. On iOS everythin works as expected, but on android i get Request fialed.
The uri i get from expo image picker, on IOS everything works as expected.

const form = new FormData();
      form.append('file', {
        uri: imageUri,
        name: 'file.jpg',
        fileName: 'file',
      });

fetch(api,{
      method: 'post',
      body: form,
    })
      .then(response => response.text())
      .then(textResponse => {
      console.log(textResponse);
      Alert.alert(textResponse);
      if (textResponse){
        setAccuracyResponse(textResponse);
      }
      })
      .catch(error => {
        console.error(error)
      });

在android上我收到此响应

on android i get this response

Network request failed
- node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:383:16 in callTimers
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Expo SDK v39
世博版3.28.5
节点v14.15.0
npm 6.14.8

Expo sdk v39
Expo version 3.28.5
node v14.15.0
npm 6.14.8

推荐答案

这有几个问题.首先是android中的文件选择器将imageUri值设置为

There were couple issues with this. First was that file picker in android would give imageUri value as

file:/user/.../path/to/file.jpg 

而iOS中的文件选择器将imageUri值设置为

whereas file picker in iOS would give imageUri value as

file:///user/.../path/to/file.jpg.

因此正确的方法是在android的formData中使用 file://而不是 file:.

So the correct approach is to use file:// instead of file: in the formData in android.

第二个问题是在表单数据中提供适当的mime类型，例如:.jpg文件的mime-type将是image/jpeg，而.png文件的mime-type将是image/png，因此您可以使用"mime"npm软件包.所以我的最终解决方案如下所示:

The second issue is providing proper mime type in the form data, Ex: mime-type for .jpg file would be image/jpeg and for .png file would be image/png, so you can use a "mime" npm package for this. So my final solution looks like this:

const imageUri = result.uri;
const newImageUri = Platform.OS === "android" ? "file:///" + imageUri.split("file:/").join("") : imageUri;
const form = new FormData();
  form.append('file', { //this prop can vary depends of your sever settings
    uri: newImageUri,
    type: mime.getType(newImageUri),
    name: newImageUri.split("/").pop(),
  });

完整的堆栈解决方法的问题可以在这里找到

这篇关于在Android上的React Native上的EXPO上获取请求失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！