अमेज़ॅन के लिए प्रतिक्रिया-मूल अपलोड छवि s3

Question

मैं अपने ऐप से S3 सर्वर पर छवियां अपलोड करना चाहता हूं। मेरे पास गणना की गई सभी डेटा और कोड हैं (कंप्यूटर पर कर्ल का उपयोग करके परीक्षण किया गया है) लेकिन मैं यह नहीं समझ सकता कि 'fetch' को सही तरीके से कैसे कॉल करें। मुझे प्रतिक्रिया मिल रही है:

'आपके द्वारा निर्दिष्ट पूर्व-स्थितियों में से कम से कम एक नहीं था। हालत: बाल्टी पोस्ट संलग्नक-प्रकार-मल्टीपार्ट/फॉर्म-डेटा '

प्रतिक्रिया-मूल निवासी में फॉर्म-डेटा कैसे पुन: बना सकता है? कोई फॉर्मडेटा नहीं है जिसमें मैं जोड़ सकता हूं और फिर इसे उदाहरण उदाहरणों में भेज सकता हूं।

संपादित करें: धन्यवाद @ फिलिप-वॉन-वीटर्सहौसेन, यह बताएं कि आपने यह सुविधा जोड़ा है। हालांकि मुझे कुछ परेशानियों को बुला रहा है। मुझे "असमर्थित बॉडीइनिट प्रकार" मिल रहा है। ऐसा इसलिए हुआ क्योंकि fetch.js में: "support.formData" झूठी रिटर्न देता है। जब मैं कॉल करता हूं तो मुझे क्या याद आ रही है?

मेरे कोड उदाहरण:

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(); 

Answer 1

कुछ लोगों ने पूछा, इसलिए मैं पोस्ट कर रहा हूं कि मैंने यह कैसे किया। यह बहुत समय पहले चुप हो गया था, इसलिए यदि आपके पास कोई टिप्पणी है या कुछ सचमुच खराब है तो मैं आलोचक के लिए खुला हूं;) फोटो कैमरे से पढ़ा गया है और 'नवीनतम फोटो' में संग्रहीत है।

चरण 1:: S3 सर्वर से

फ़ोटो अपलोड कर रहा उत्पन्न डेटा:

_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 }); 

    }, 

Answer 2

multipart/form-data मिश्रित पेलोड के लिए प्रतिक्रिया मूल निवासी के लिए समर्थन (एक्सएचआर FormData एपीआई के माध्यम से) (जे एस तार + छवि पेलोड) पर काम चल रहा है। इसे जल्द ही गिटहब में उतरना चाहिए।

Answer 3

@ मीकल Zubrzycki धन्यवाद, चित्र अपलोड करने के लिए अपने कोड छोटे बदलावों के साथ मेरे लिए काम किया।

var photo = { 
    uri: user.profilePicture, 
    type: 'image/jpeg', 
    name: 'photo.jpg', 
}; 
var 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) => { 
    alert("ERROR " + error) 
}) 
.then((responseData) => { 
    alert("Succes "+ responseData) 
}).done(); 

Answer 4

S3 विकल्प:

// 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" 
    } 
} 

घटक:

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> 
    ); 
    } 
    } 
}