一直在try 使用预先签名的url将图像从React Native上传到S3,但没有成功.这是我的代码:

在 node 中生成预签名的url:

const s3 = new aws.S3();

const s3Params = {
  Bucket: bucket,
  Key: fileName,
  Expires: 60,
  ContentType: 'image/jpeg',  
  ACL: 'public-read'
};

return s3.getSignedUrl('putObject', s3Params);

以下是RN对S3的请求:

var file = {
  uri: game.pictureToSubmitUri,
  type: 'image/jpeg',
  name: 'image.jpg',
};

const xhr = new XMLHttpRequest();
var body = new FormData();
body.append('file', file);
xhr.open('PUT', signedRequest);
xhr.onreadystatechange = () => {
  if(xhr.readyState === 4){
    if(xhr.status === 200){
      alert('Posted!');
    }
    else{
      alert('Could not upload file.');
   }
 }
};
xhr.send(body);

游戏pictureToSubmitUri=assets-library://asset/asset.JPG?id=A282A2C5-31C8-489F-9652-7D3BD5A1FAA4&ext=JPG

signedRequest=https://my-bucket.s3-us-west-1.amazonaws.com/8bd2d4b9-3206-4bff-944d-e06f872d8be3?AWSAccessKeyId=AKIAIOLHQY4GAXN26FOQ&Content-Type=image%2Fjpeg&Expires=1465671117&Signature=bkQIp5lgzuYrt2vyl7rqpCXPcps%3D&x-amz-acl=public-read

错误消息:

<Code>SignatureDoesNotMatch</Code>
<Message>
The request signature we calculated does not match the signature you provided. Check your key and signing method.
</Message>

我可以使用生成的url成功地将其curl 并镜像到S3,并且似乎能够成功地发布到requestb.in from RN(但是我只能在requestb.in上看到原始数据,所以不能100%确定图像是否正确).

基于所有这些,我把问题缩小到1)我的图像上传周期不正确,或者2)S3希望我的请求的方式与它的输入方式不同.

任何帮助都将不胜感激!

使现代化

如果正文只是文本({'data':'foo'}),则可以成功地从RN发布到S3.也许AWS不喜欢多格式数据?我怎样才能在RN中以文件的形式发送???

推荐答案

FormData将创建multipart/form-data请求.S3 PUT对象需要其请求主体为文件.

您只需在请求正文中发送文件,而无需将其包装为FormData:

function uploadFile(file, signedRequest, url) {
  const xhr = new XMLHttpRequest();
  xhr.open('PUT', signedRequest);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if(xhr.status === 200) {
        alert(url);
      } else {
        alert('Could not upload file.');
      }
    }
  };
  xhr.send(file);
};

例如,请参见浏览器中的https://devcenter.heroku.com/articles/s3-upload-node.还请确保您的Content-Type头与签名的URL请求匹配.

React-native相关问答推荐

嵌套的FlatList内的Incorrect Padding

React Native 动画.您必须在转换属性中精确指定一个属性.

react-native-fs 改变 toUrl 本身

ReactNative 0.43-rc.2 FlatList -- 试图获取超出范围索引 0 的框架

React Native - 初始属性 Android

文本在 android 中被截断以响应本机

React Native - 如何判断 UI/元素?

React Native localhost 另一个调试器已经连接

如何在react native中过滤对象数组?

在 React Native (iOS) 中支持动态类型

react-native run-ios 运行失败: Application is unknown to FrontBoard?

当数据为空时,React-Native FlatList 呈现零状态

将 React Native 升级到 0.60-RC2 后找不到库libjsc.so

如何将props传递给 React Navigation 导航器中的组件?

React Native Android 负边距(Margins)

INSTALL_FAILED_INSUFFICIENT_STORAGE 运行 npm run android 命令时出错

使用 React Native 运行 Firebase 3.0 时出错

运行 expo start 时如何禁用在浏览器中打开 DevTools?

React Navigation 切换背景 colored颜色 和样式 StackNavigator

将 Picker 绑定到 React Native 中的 Picker.Item 列表