React Native 上传图像到 AWS 服务器不适用于 Android [英] React Native upload image to AWS Server not working for Android

问题描述

我在尝试将图像从 React Native 上传到 AWS 服务器时遇到了一些问题.这是我的代码:

I was having some problem when trying to upload image from React Native to AWS Server. Here is my code:

async function uploadImageAsync(uri) {
  console.log(uri);
  let apiUrl = '...' 
  let uriParts = uri.split('.');
  let fileType = uri[uri.length - 1];
  let formData = new FormData();
  formData.append('image', {
    uri,
    name: `image.jpg`,
    filename: `image.jpg`,
  });

  let options = {
    method: 'POST',
    body: formData,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
    },
  };

  return fetch(apiUrl, options);
}

在控制台打印出来的结果是:

The results that printed out at the console are:

file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540gh%252Ftp2/ImagePicker/37c89140-2172-4566-98a2-e7393ea72e89.jpg
Object {
  "uploadResponse": undefined,
}
Object {
  "uploadResult": undefined,
}
Object {
  "e": [TypeError: Network request failed],
}

我所做的是从图像选择器中选择一个图像，然后将其上传到 AWS 服务器.如果成功，打印出成功信息.如果失败，在上面的控制台打印出来.

What I did is I pick an image from image picker, then I will upload it to AWS server. If success, print out success message. If failed, print out those in the console above.

奇怪的是，它设法在 iOS 上上传，而不是在 Android 上上传.任何想法为什么会这样?

The strange thing is, it managed to upload on iOS but not Android. Any ideas why is it so?

谢谢！

推荐答案

我遇到了同样的问题.我试图将手机的相机胶卷或照片库中的图像上传到 AWS S3.它在 IOS 上运行良好，但在 Android 设备上抛出错误 TypeError: Network request failed.

I was facing the same issue. I was trying to upload images from the phone's camera roll or photo gallery to AWS S3. It was working fine for IOS, but was throwing error TypeError: Network request failed for Android device.

所以，我使用了 npm 库 rn-fetch-blob，而不是fetch() 方法.

So, I used npm library rn-fetch-blob, instead of fetch() method.

import RNFetchBlob from 'rn-fetch-blob';

RNFetchBlob.fetch('PUT', AWSPresignedURL, {'Content-Type': 'multipart/form-data'}, Platform.OS === 'ios' ? RNFetchBlob.wrap(filePath) : `RNFetchBlob-${filePath}`)

请注意，就我而言，IOS 和 Android 设备的文件路径不同.我们使用 rn-fetch-blob 以不同的方式处理它

示例文件路径变量数据

1. IOS 设备 -

"/Users/Niveditha/Library/Developer/CoreSimulator/Devices/B41EB910-F22B-4236-8286-E6BA3EA75C70/data/Containers/Data/Application/B88777C6-6B10-4095-AB604-BB11Eact-F22B-4236-8286-E6BA3EA75C70-image-crop-picker/img.jpg"

"/Users/Niveditha/Library/Developer/CoreSimulator/Devices/B41EB910-F22B-4236-8286-E6BA3EA75C70/data/Containers/Data/Application/B88777C6-6B10-4095-AB67-BB11E045C1DE/tmp/react-native-image-crop-picker/img.jpg"

1. Android 设备 -

"file:///storage/emulated/0/Android/data/com.uploadcameraroll/files/Pictures/img.jpg"

"file:///storage/emulated/0/Android/data/com.uploadcameraroll/files/Pictures/img.jpg"

生成 AWSPreSignedURL 的代码 -

let AWS = require('aws-sdk');
let S3 = new AWS.S3();

AWS.config.region = 'ap-south-1'; 
AWS.config.accessKeyId = 'AKXXXXXXXXXXXXXXXX'; 
AWS.config.secretAccessKey = 'XIJyXXXXXXXXXXXXXXXXXXXXXXXXXXX+H+GR';

S3.getSignedUrl( 'putObject' , 
        { Bucket: 'upload-app-photos',
          Key: 'upload/' + fileName,
          Expires: 120,
          ACL: 'public-read'
         }, (err,url) => {
            if (err) {
               console.log("error ", err);
               return;
           }
            console.log("AWSPreSignedURL ", url);
      })

此问题已正式提出 - https://github.com/facebook/react-native/issues/25244

This issue was officially raised - https://github.com/facebook/react-native/issues/25244

这篇关于React Native 上传图像到 AWS 服务器不适用于 Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！