React-native 上传图片到亚马逊 s3 [英] React-native upload image to amazons s3

问题描述

我想将图像从我的应用上传到 S3 服务器.我计算了所有数据和代码(在计算机上使用 curl 测试)，但我无法弄清楚如何正确调用获取".我收到回复:

I want to upload images from my app to S3 server. I have all data and codes calculated (tested using curl on computer) but I can't figure out how to call 'fetch' correctly. I'm getting response:

'至少您指定的先决条件之一不成立.条件:Bucket POST 必须是enclosure-type-multipart/form-data'

'At least one of the pre-conditions you specified did not hold. Condition: Bucket POST must be of the enclosure-type-multipart/form-data'

如何在 react-natives fetch 中重新创建表单数据?没有我可以像在 fetches 示例中那样附加然后发送它的 FormData.

How can I recreate form-data in react-natives fetch? There is no FormData to which I can append and then send it like in fetches example.

感谢 @philipp-von-weitershausen，很高兴您添加了此功能.但是我在调​​用它时遇到了一些麻烦.我收到不支持的 BodyInit 类型".发现是因为在 fetch.js: "support.formData" 返回 false.当我调用 fetch 时，我错过了什么?

Thanks @philipp-von-weitershausen, greate that you have added this feature. However I have some troubles calling it. I'm getting "Unsupported BodyInit type". Found that is because in fetch.js: "support.formData" returns false. What am I missing when I call fetch?

我的代码示例:

 var form = new FormData();
 form.append("FormData", true)
 form.append("name", this.state.invoiceNumber)
 form.append("key", this.state.invoiceNumber)
 form.append("Content-Type", "image/png")
 form.append('file', this.props.uri)
 //alert(FormData.prototype.isPrototypeOf(form))

  fetch(amazon_url,{body: form,mode: "FormData", method: "post", headers: {"Content-Type": "multipart/FormData"}})
          .then((response) => response.json())
          .catch((error) => {
             alert("ERROR " + error)
          })
          .then((responseData) => {
             alert("Succes "+ responseData)
          })
          .done();

推荐答案

有些人问，所以我发布我是如何做到的.很久以前它就安静地完成了，所以如果你有任何评论或做的事情真的很糟糕，我愿意接受批评；)照片从 cameraRoll 读取并存储在latestPhoto"中.

Some people asked, so I'm posting how I did it. It was done quiet long time ago so if you have any comments or something is really bad done I'm open to critic ;) Photo is in read from cameraRoll and stored in 'latestPhoto'.

上传照片到 S3 服务器:

Uploading photo to S3 server:

第一步:生成数据:

_addTextParam() {
    var textParams = this.state.textParams;
    s3_upload_id = this.makeid()
    textParams.push({ name: "key", value: this.state.upload_path + s3_upload_id + '/' + this.state.att_name + ".jpg" })
    textParams.push({ name: "AWSAccessKeyId", value: this.state.key })
    textParams.push({ name: "acl", value: "public-read" })
    textParams.push({ name: "success_action_status", value: "201" })
    textParams.push({ name: "policy", value: this.state.policy })
    textParams.push({ name: "signature", value: this.state.signature })
    textParams.push({ name: "Content-Type", value: "image/jpeg" })

    this.setState({ textParams: textParams });
  }

第 2 步:发送数据:

Step 2: Send data:

  _send() {

    this._addTextParam()
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "http://" + this.state.fs_domain + "." + this.state.server);
    xhr.onload = () => {
      this.setState({ isUploading: false });
      if (xhr.status !== 201) {
        AlertIOS.alert( 
          'Upload failed',
          'Expected HTTP 200 OK response, got ' + xhr.status + "/" + xhr.responseText
        );
        return;
      }

      if (!xhr.responseText) {
        AlertIOS.alert(
          'Upload failed',
          'No response payload.'
        );
        return;
      }
      var index = xhr.responseText.indexOf( "http://" + this.state.fs_domain + "." + this.state.server);
      if (index === -1) {
        AlertIOS.alert(
          'Upload failed',
          'Invalid response payload.'
        );
        return;
      }
      var url = xhr.responseText.slice(index).split('
')[0];
      this.state.s3_file_id = xhr.responseText.split('Tag>"')[1].split('"')[0]
      this.state.s3_file_path = xhr.responseText.split('Location>')[1].split('<')[0]
      this.setState({ isUploading: false });
      RCTDeviceEventEmitter.emit('Uploaded')

    };
    var formdata = new FormData();

    this.state.textParams.forEach((param) => {
        formdata.append(param.name, param.value)
      }
    );

    formdata.append('file', {...this.state.latestPhoto, name: (this.state.att_name+".jpg") });

    xhr.send(formdata);
    this.setState({ isUploading: true });

  },

这篇关于React-native 上传图片到亚马逊 s3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！