blocks|key|4494628|text|对混合有效负载(JS字符串%2B图像有效负载)的React+Native+(通过XHR+FormData+API)的multipart/form-data支持正在进行中。它应该很快就会登陆GitHub。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4494629|entityMap^0|16|8|1K|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<code>multipart/form-data</code> support for React Native (via the XHR <code>FormData</code> API) for mixed payloads (JS strings + image payloads) is in the works. It should land in GitHub soon.

blocks|key|4494663|text|有些人问，所以我把我是怎么做到的。这是很久以前安静地完成的，所以如果你有任何评论，或者做得很糟糕，我会向评论家开放;)照片是从cameraRoll读取并存储在'latestPhoto‘中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4494664|正在将照片上传到S3服务器：|4494665|步骤1:生成数据：|4494666|_addTextParam()+{
++++var+textParams+=+this.state.textParams;
++++s3_upload_id+=+this.makeid()
++++textParams.push({+name:+"key",+value:+this.state.upload_path+%2B+s3_upload_id+%2B+'/'+%2B+this.state.att_name+%2B+".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-block|syntax|javascript|4494667|步骤2:发送数据：|4494668|++_send()+{

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

++++++if+(!xhr.responseText)+{
++++++++AlertIOS.alert(
++++++++++'Upload+failed',
++++++++++'No+response+payload.'
++++++++);
++++++++return;
++++++}
++++++var+index+=+xhr.responseText.indexOf(+"http://"+%2B+this.state.fs_domain+%2B+"."+%2B+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%2B".jpg")+});

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

++},|4494669|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

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: 

<pre><code>_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></pre>

Step 2: Send data:

<pre><code> _send() {

 this._addTextParam()
 var xhr = new XMLHttpRequest();
 xhr.open('POST', "http://" + this.state.fs_domain + "." + this.state.server);
 xhr.onload = () =&gt; {
 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&gt;"')[1].split('"')[0]
 this.state.s3_file_path = xhr.responseText.split('Location&gt;')[1].split('&lt;')[0]
 this.setState({ isUploading: false });
 RCTDeviceEventEmitter.emit('Uploaded')

 };
 var formdata = new FormData();

 this.state.textParams.forEach((param) =&gt; {
 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 });

 },
</code></pre>

blocks|key|4495639|text|@MichałZubrzycki谢谢，你上传图片的代码对我来说很有用，只需要做一些小改动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4495640|const+photo+=+{
++uri:+user.profilePicture,
++type:+"image/jpeg",
++name:+"photo.jpg"
};
const+form+=+new+FormData();
form.append("ProfilePicture",+photo);
fetch(Constants.API_USER+%2B+"me/profilePicture",+{
++body:+form,
++method:+"PUT",
++headers:+{
++++"Content-Type":+"multipart/form-data",
++++Authorization:+"Bearer+"+%2B+user.token
++}
})
++.then(response+=>+response.json())
++.catch(error+=>+{
++++console.log("ERROR+",+error);
++})
++.then(responseData+=>+{
++++console.log("Success",+responseData);
++})
++.done();|code-block|syntax|javascript|4495641|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

@Michał Zubrzycki Thanks, your code for uploading picture worked for me with little changes.

<pre><code>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 =&gt; response.json())
 .catch(error =&gt; {
 console.log("ERROR ", error);
 })
 .then(responseData =&gt; {
 console.log("Success", responseData);
 })
 .done();
</code></pre>

blocks|key|4495691|text|S3选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4495692|//+this.state.s3options+in+YourComponent
{
++"url":+"https://yourapp.s3.eu-central-1.amazonaws.com",
++"fields":+{
++++"key":+"cache/22d65141b48c5c44eaf93a0f6b0abc30.jpeg",
++++"policy":+"eyJleHBpcm...1VDE0Mzc1OVoifV19",
++++"x-amz-credential":+"AK...25/eu-central-1/s3/aws4_request",
++++"x-amz-algorithm":+"AWS4-HMAC-SHA256",
++++"x-amz-date":+"20161125T143759Z",
++++"x-amz-signature":+"87863c360...b9b304bfe650"
++}
}|code-block|syntax|javascript|4495693|组件：|4495694|class+YourComponent+extends+Component+{
++//+...

++//+fileSource+looks+like:+{uri:+"content://media/external/images/media/13",+isStatic:+true}
++async+uploadFileToS3(fileSource)+{
++++try+{
++++++var+formData+=+new+FormData();
++++++//+Prepare+the+formData+by+the+S3+options
++++++Object.keys(this.state.s3options.fields).forEach((key)+=>+{
++++++++formData.append(key,+this.state.s3options.fields[key]);
++++++});
++++++formData.append('file',+{
++++++++uri:+fileSource.uri,
++++++++type:+'image/jpeg',
++++++});
++++++formData.append('Content-Type',+'image/jpeg')

++++++var+request+=+new+XMLHttpRequest();
++++++request.onload+=+function(e)+{
++++++++if+(e.target.status+===+204)+{
++++++++++//+Result+in+e.target.responseHeaders.Location
++++++++++this.setState({avatarSourceRemote:+{uri:+e.target.responseHeaders.Location}})
++++++++}
++++++}.bind(this)
++++++request.open('POST',+this.state.s3options.url,+true);
++++++request.setRequestHeader('Content-type',+'multipart/form-data');
++++++request.send(formData);
++++}+catch(error)+{
++++++console.error(error);
++++}
++}

++//+Example+display+the+uploaded+image
++render()+{
++++if+(this.state.avatarSourceRemote)+{
++++++return+(
++++++++<Image+source={this.state.avatarSourceRemote}+style={{width:+100,+height:+100}}+/>
++++++);
++++}+else+{
++++++return+(
++++++++<Text>No+Image</Text>
++++++);
++++}
++}
}|4495695|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

S3 options:

<pre><code>// this.state.s3options in YourComponent
{
 "url": "https://yourapp.s3.eu-central-1.amazonaws.com",
 "fields": {
 "key": "cache/22d65141b48c5c44eaf93a0f6b0abc30.jpeg",
 "policy": "eyJleHBpcm...1VDE0Mzc1OVoifV19",
 "x-amz-credential": "AK...25/eu-central-1/s3/aws4_request",
 "x-amz-algorithm": "AWS4-HMAC-SHA256",
 "x-amz-date": "20161125T143759Z",
 "x-amz-signature": "87863c360...b9b304bfe650"
 }
}
</code></pre>

Component:

<pre><code>class YourComponent extends Component {
 // ...

 // fileSource looks like: {uri: "content://media/external/images/media/13", isStatic: true}
 async uploadFileToS3(fileSource) {
 try {
 var formData = new FormData();
 // Prepare the formData by the S3 options
 Object.keys(this.state.s3options.fields).forEach((key) =&gt; {
 formData.append(key, this.state.s3options.fields[key]);
 });
 formData.append('file', {
 uri: fileSource.uri,
 type: 'image/jpeg',
 });
 formData.append('Content-Type', 'image/jpeg')

 var request = new XMLHttpRequest();
 request.onload = function(e) {
 if (e.target.status === 204) {
 // Result in e.target.responseHeaders.Location
 this.setState({avatarSourceRemote: {uri: e.target.responseHeaders.Location}})
 }
 }.bind(this)
 request.open('POST', this.state.s3options.url, true);
 request.setRequestHeader('Content-type', 'multipart/form-data');
 request.send(formData);
 } catch(error) {
 console.error(error);
 }
 }

 // Example display the uploaded image
 render() {
 if (this.state.avatarSourceRemote) {
 return (
 &lt;Image source={this.state.avatarSourceRemote} style={{width: 100, height: 100}} /&gt;
 );
 } else {
 return (
 &lt;Text&gt;No Image&lt;/Text&gt;
 );
 }
 }
}
</code></pre>

blocks|key|4495704|text|//You+need+to+Initialize+Amplify+in+App.js

import+Amplify+from+'aws-amplify';


Amplify.configure({
++Auth:+{
++++identityPoolId:+Config.AWS_COGNITO_IDENTITY_POOL_ID,+//REQUIRED+-+Amazon+Cognito+Identity+Pool+ID
++++region:+Config.S3_REGION,+//+REQUIRED+-+Amazon+Cognito+Region
++},
++Storage:+{
++++AWSS3:+{
++++++bucket:+Config.S3_BUCKET,
++++++region:+Config.S3_REGION,
++++},
++},
});


//+In+your+file

import+{Storage}+from+'aws-amplify';

export+const+S3UploadFile+=+async+(uri,+name,+type)+=>+{
++const+file+=+await+fetch(uri);
++const+blob+=+await+file.blob();
++const+key+=+'/'+%2B+name;

++return+Storage.put(key,+blob,+{
++++contentType:+type,
++});
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4495705|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>//You need to Initialize Amplify in App.js

import Amplify from 'aws-amplify';


Amplify.configure({
 Auth: {
 identityPoolId: Config.AWS_COGNITO_IDENTITY_POOL_ID, //REQUIRED - Amazon Cognito Identity Pool ID
 region: Config.S3_REGION, // REQUIRED - Amazon Cognito Region
 },
 Storage: {
 AWSS3: {
 bucket: Config.S3_BUCKET,
 region: Config.S3_REGION,
 },
 },
});


// In your file

import {Storage} from 'aws-amplify';

export const S3UploadFile = async (uri, name, type) =&gt; {
 const file = await fetch(uri);
 const blob = await file.blob();
 const key = '/' + name;

 return Storage.put(key, blob, {
 contentType: type,
 });
};
</code></pre>

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: 

<pre><code> 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) =&gt; response.json())
 .catch((error) =&gt; {
 alert("ERROR " + error)
 })
 .then((responseData) =&gt; {
 alert("Succes "+ responseData)
 })
 .done();
</code></pre>

React-native upload image to amazons s3

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想从我的应用程序上载图像到S3服务器。我已经计算了所有的数据和代码(在计算机上使用curl进行了测试)，但是我不知道如何正确地调用'fetch‘。我得到的回应是：‘您指定的前提条件中至少有一个不成立。条件:存储桶POST的类型必须为enclosure-type-multipart/form-data’如何在react...

问React-原生上传图片到亚马逊s3
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React-原生上传图片到亚马逊s3EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React-原生上传图片到亚马逊s3
EN