React-原生上传图片到亚马逊s3
React-原生上传图片到亚马逊s3
提问于 2015-06-10 00:01:55
我想从我的应用程序上载图像到S3服务器。我已经计算了所有的数据和代码(在计算机上使用curl进行了测试)，但是我不知道如何正确地调用'fetch‘。我得到的回应是：
‘您指定的前提条件中至少有一个不成立。条件:存储桶POST的类型必须为enclosure-type-multipart/form-data’
如何在react-natives中重新创建表单数据？没有像fetches示例中那样可以追加然后发送的FormData。
编辑:谢谢@philipp-von-weitershausen，非常感谢你添加了这个功能。然而，我在调用它时遇到了一些麻烦。我得到了“不支持的BodyInit类型”。发现这是因为在fetch.js中："support.formData“返回false。当我调用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();回答 5
Stack Overflow用户
回答已采纳
发布于 2015-11-04 16:05:52
有些人问，所以我把我是怎么做到的。这是很久以前安静地完成的，所以如果你有任何评论，或者做得很糟糕，我会向评论家开放;)照片是从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 });
}步骤2:发送数据：
_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 });
},Stack Overflow用户
发布于 2016-04-15 22:08:48
@MichałZubrzycki谢谢，你上传图片的代码对我来说很有用，只需要做一些小改动。
const photo = {
uri: user.profilePicture,
type: "image/jpeg",
name: "photo.jpg"
};
const form = new FormData();
form.append("ProfilePicture", photo);
fetch(Constants.API_USER + "me/profilePicture", {
body: form,
method: "PUT",
headers: {
"Content-Type": "multipart/form-data",
Authorization: "Bearer " + user.token
}
})
.then(response => response.json())
.catch(error => {
console.log("ERROR ", error);
})
.then(responseData => {
console.log("Success", responseData);
})
.done();Stack Overflow用户
发布于 2015-06-10 03:39:08
对混合有效负载(JS字符串+图像有效负载)的React Native (通过XHR FormData API)的multipart/form-data支持正在进行中。它应该很快就会登陆GitHub。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30737226
复制相关文章
相似问题
腾讯云开发者
