React-native上传图片到amazons s3 [英] React-native upload image to amazons s3
问题描述
我想从我的应用上传图片到S3服务器。我有所有的数据和代码计算（测试使用卷曲在计算机上），但我不知道如何正确调用获取。我收到了回应：
'您指定的至少一个前提条件不成立。条件：Bucket POST必须是enclosure-type-multipart / form-data'
如何在react-natives获取中重新创建表单数据？有没有FormData我可以追加，然后发送它就像在提取的例子。
编辑：
感谢@ philipp-von-weitershausen，greate你已经添加了这个功能。不过我有一些麻烦叫它。我得到不支持的BodyInit类型。发现是因为在fetch.js中：support.formData返回false。当我打电话时，我错过了什么？
我的代码示例：
$ $ $ $ $ $ $ $ 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'。
将照片上传到S3服务器：
第1步：生成数据：
_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}）;
$ / code> 第二步：发送数据：
_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;
$ b $ if（！xhr.responseText）{
AlertIOS.alert（
'上传失败'，
'无响应有效载荷'）
）;
return;
}
var index = xhr.responseText.indexOf（http：//+ this.state.fs_domain +。+ this.state.server）;
if（index === -1）{
AlertIOS.alert（
'上传失败'，
'无效的响应负载。'
）;
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}）;
}，
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:
'At least one of the pre-conditions you specified did not hold. Condition: Bucket POST must be of the enclosure-type-multipart/form-data'
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.
EDIT: 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?
My code example:
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();
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'.
Uploading photo to S3 server:
Step 1: Generate data:
_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 });
}
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('\n')[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上传图片到amazons s3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
