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

其实我也遇到过这个问题。您想使用 'fetch' 上传文件（类型为 mutipartfile），但它总是显示 [TypeError: Network request failed]。你可以参考这个问题（https://github.com/facebook/react-native/issues/28551）。如果您使用的是 RN0.62，请尝试一下。

这是github用户[abumostafa]在链接问题中的总结。

谁还在为这个问题苦苦挣扎。这是因为 Flipper 网络插件而发生的。 我禁用了它，一切正常。

我的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            @Override
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

Answer 2

我也面临同样的问题。我试图将图像从手机的相机胶卷或照片库上传到 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 以不同的方式处理它

示例文件路径变量数据

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"

1. Android 设备 -

“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

Answer 3

我不确定您是否正在尝试将文件上传到 AWS S3 服务，但如果是，您可以查看 AWS Amplify React Native，这可能对您有很大帮助。

通过使用这个库，您可以通过以下方式上传文件：

Storage.put('test.txt', 'Hello')
    .then (result => console.log(result))
    .catch(err => console.log(err));

详情在https://github.com/aws/aws-amplify

Answer 4

我遇到了类似的问题，终于解决了。所以我想我可以给你一个提示。

1. 首先，[TypeError: Network request failed]表示问题出在客户端。

2. apiUrl 应该是 https://...

   您可以简单地使用 localtunnel npm 进行测试。它为您提供了代理本地 url 的 https 格式 url。

1. 您可以添加 type: 'image/jpeg' 来形成数据。

   你可以在这里查看media type

这是获取代码的一部分

https://gist.github.com/zeroFruit/d46d4cae57e5e8cf59e1b541c0bf322e