FETCH statt XMLHttpRequest in React india

Question

ich Bilder auf S3 zu laden versuchte, aus meiner reagieren native App, indem Sie und diese Anleitung durch Heroku Anpassung: https://devcenter.heroku.com/articles/s3-upload-node

Im Grunde bin ich mit dem aws-sdk auf meine ausdrückliche. js Backend zum Generieren einer vor-signierten Anfrage zum Hochladen von Bildern nach S3 von reaktionsnativ.

Alles funktioniert gut, also habe ich versucht, die XMLHttpRequests in Abrufanforderungen zu konvertieren, die von nativen Reaktionen bevorzugt werden. Nach der Konvertierung werden die Dateien noch bis S3 hochgeladen werden, aber wenn ich auf dem Bild Link klicken, dann würden die Bilder nicht nicht richtig zeigen, sondern ein leeres Quadrat angezeigt wird:

Empty square shown instead of image

Spezifischer es scheint dieses Stück Codeumwandlung zu sein, dass es passieren verursacht:

von:

_uploadFile(file, signedRequest, url){ 
    const xhr = new XMLHttpRequest(); 
    xhr.open('PUT', signedRequest); 
    xhr.onreadystatechange =() => { 
    if(xhr.readyState === 4){ 
     if(xhr.status === 200){ 
     console.log("UPLOAD DONE"); 
     } else { 
     alert('ERROR UPLOADING'); 
     } 
    } 
    }; 
    xhr.send(file); 
} 

an:

Die Objektdatei wird hochgeladen:

{ 
    name: "profileImage", 
    type: "image/jpeg", 
    uri: 'data:image/jpeg;base64,' + response.data, //just a base64 image string 
    isStatic: true 
    } 

Könnte jemand etwas Licht auf, warum dies geschehen könnte, oder haben ähnliche Erfahrungen gemacht? Danke vielmals!

Answer 1

In Ihrem Beispiel holen Sie eine JSON-Zeichenfolge in Ihren Körper. Es wird an S3 gesendet, aber es wird nicht als Bildupload interpretiert. Sie sollten in der Lage sein, selbst ein Objekt FormData zu konstruieren und es als Abrufkörper zu holen, aber ich denke, die Verwendung von XHR ist die einfachere Option. Laut this comment ist es auch Facebook (der Kommentar ist älter als ein Jahr).

Wenn möglich, sollten Sie auch versuchen, lokale URIs anstelle von Base64-codierten Daten zu verwenden. Es dauert eine ganze Weile, um ein paar MB Bilddaten zwischen JS und nativ zu übertragen.