Question

尝试将映像从React Native上传到AWS Server时遇到了一些问题。这是我的代码：

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服务，但如果您是，则可以查看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 2

实际上，我遇到了这个问题。您想使用“提取”上传文件（类型为mutipartfile），但它始终显示[TypeError：网络请求失败]。您可以参考此问题（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 3

我有类似的问题，最后解决了。所以我想我可以给你一个提示。

首先，[TypeError：网络请求失败]表示问题出在客户端。
apiUrl应该https：// ...

您可以使用localtunnel npm进行测试。它为您提供代理到本地网址的https格式网址。

您可以添加类型：＆＃39; image / jpeg＆＃39;形成数据。

您可以在此处查看media type

这是获取代码的一部分

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

Answer 4

我面临着同样的问题。我试图将图像从手机的相机胶卷或照相馆上传到AWS S3。对于IOS来说，它工作正常，但是对于Android设备抛出错误 TypeError：网络请求失败。

因此，我使用了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

以不同的方式处理它

示例文件路径变量数据

IOS设备-

“ /用户/ Niveditha /库/开发人员/ CoreSimulator / Devices / B41EB910-F22B-4236-8286-E6BA3EA75C70 / data /容器/数据/应用程序/ 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

将本机上载映像React到AWS服务器不适用于Android

4 个答案: