Question

我正在尝试重新创建在React Native中上传用户提交的图片的Heroku example，但仍然从AWS获得400个错误。

图像来自iOS相机胶卷。我有图像的uri和图像的base64编码版本。 mime类型为image/jpeg。到目前为止，我已经按照Heroku的说法设置了一切，但是我在制作文件时遇到了麻烦，我发送了正确的形状。我已在下面添加了我的代码以供澄清。

我正在使用react-native-image-picker从相机胶卷中选择图像

客户端代码

module.exports = React.createClass({
...

openPhotos() { // called on a button press, opens camera roll
    ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) return;
      if (response.error) return Alert.alert('ImagePicker Error: ', response.error);
      this.getSignedRequest(response);
    });
  },
getSignedRequest(pickerResp) {
  // image uri IS pickerResp.uri AS IS `data:image/jpg;base64,${pickerResp.data}`
  var file = {
    uri: pickerResp.uri, // ALSO WORKS `data:image/jpg;base64,${pickerResp.data}`,
    name: `${this.props.email}.jpg`,
    type: 'image/jpeg'
  };
  var body = new FormData();
  body.append('file', file);

  fetch(`${api.TEST_API}sign-s3?file-name=${file.name}.jpg&file-type=${file.type}`, {
    method: "GET"
  }).then(response => response.json()).then(data => {
    Alert.alert("GOT SIGNED REQUEST",data.url);
    fetch(data.signedRequest, { method: 'put', body: body }).then(resp => resp.json()).then(data => {
      this.setState({uploadedFile: true});
      this.props.toSignup();
    }).catch(err => Alert.alert("Server Error", "Could not upload profile photo."))
  }).catch(err => {
    Alert.alert('S3 Signed Request Error',"Look at the Logs");
    console.log(err);
  })
},

...
};

服务器端代码

AWS NPM包：[aws-sdk]

// get signature to upload client side to s3
apiRouter.get('/sign-s3', function(req, res) {
  console.log('signing s3')
  const s3 = new aws.S3(); // automatically loads key and secret
  const fileName = req.query['file-name'];
  const fileType = req.query['file-type'];
  const s3Params = {
    Bucket: S3_BUCKET,
    Key: fileName,
    Expires: 60,
    ContentType: fileType,
    ACL: 'public-read'
  };

  s3.getSignedUrl('putObject', s3Params, (err, data) => {
    if(err) return console.log(err)
    const returnData = {
      signedRequest: data,
      url: `https://${S3_BUCKET}.s3.amazonaws.com/${fileName}`
    };
    console.log(returnData)
    res.json(returnData);
  });
});

Answer 1

fetch(`${api.TEST_API}sign-s3?file-name=${file.name}.jpg&file-type=${file.type}

此处的获取请求是在所描述的文件名的末尾添加额外的.jpg，因此当您尝试上传到S3时，它会被拒绝，因为有效负载与先前的请求不匹配。此外，Heroku建议的XMLHttpRequest可以很好地处理你所拥有的文件，但是使用base64数据（下图）。

var file = {
  uri: `data:image/jpg;base64,${pickerResp.data}`, //pickerResp.uri,
  type: 'image/jpeg',
  name: `${this.props.email}.jpg`,
};

以下XML HTTP请求将以编码形式将图像发送到S3，其中一个简单的GET请求或图像src属性可以访问该文件。

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

使用签名请求从ReactNative（iOS）直接发布到AWS S3

1 个答案: