javascript - React Native 将图像上传到 AWS 服务器不适用于 Android

Question

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

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);
}

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

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服务器。如果成功，打印出成功信息。如果失败，请在上面的控制台中打印出这些内容。

奇怪的是，它能够在 iOS 上上传，但在 Android 上却不行。有什么想法为什么会这样吗？

谢谢!

Answer 1

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

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

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 以不同的方式处理它

示例 filePath 变量数据

1. IOS 设备 -

“/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"

Android 设备 -

“文件:///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