在 android 上反应原生的博览会上获取图像失败 [英] Fetching image fails on expo on react native on android

问题描述

我使用 fetch 将图像发送到服务器.在 iOS 上，一切都按预期工作，但在 android 上，我的请求失败了.
我从 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)
      });

在安卓上我得到这个响应

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 上反应原生的博览会上获取图像失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！