Ich arbeite an einer React Native-Anwendung, wo ich versuche, Bilder aus einer Benutzerrolle Kamera zu nehmen, sie in eine Base64-Zeichenfolge konvertieren und speichern sie für spätere Verwendung in Amazon S3.Saving base64 Zeichenfolge zu Amazon S3
Nach diesem Blog-Eintrag ich in der Lage bin eine Benutzerkamerarolle zu übernehmen und die Bilder zu Base64 konvertieren: react-native-creating-a-custom-module-to-upload-camera-roll-images
ich dann die base64 String Bilddaten auf einen einfachen Express-Server sende ich eingerichtet habe um die Daten in meinen Amazon S3-Bucket zu stellen.
// Only getting first img in camera roll for testing purposes
CameraRoll.getPhotos({first: 1}).then((data) => {
for (let i = 0; i < data.edges.length; i++) {
NativeModules.ReadImageData.readImage(data.edges[i].node.image.uri, (imageBase64) => {
// Does the string have to be encoded?
// const encodeBase64data = encodeURIComponent(imageBase64);
const obj = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
'img': imageBase64
})
}
fetch('http://localhost:3000/saveImg', obj)
.then((res) => {
console.log(JSON.parse(res._bodyInit));
})
})
}
Meine imageBase64 Variable in diesem Fall ist eine ziemlich große Zeichenfolge zu lesen wie: /9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAATU0AKgAAA...abX+Yub/API3zf8A7G2Z/wDqdiD/AExyf/kT5R/2Kst/9QqB0x6H6GuBbr1R6D2foz+ZT/gof/yep8bf934f/wDqC6PX96+Cn/JruFf+6z/6t8UfwP4wf8nM4n9Mq/8AVbRPjOv1I/OAoA//2Q== Mit dem ... mehrere Zeichen zu sein.
Ich sende diesen Base64-String zu meinem Express Server und veröffentliche die Daten:
app.post('/saveImg', function(req, res) {
// this will be moved once testing is complete
var s3Bucket = new AWS.S3({ params: {Bucket: '[my_bucket_name]'} });
// Do I need to append this string to the image?
var baseImg = 'data:image/png;base64,' + req.body.img;
var data = {
Key: test_img,
Body: req.body.img,
ContentEncoding: 'base64',
ContentType: 'image/png'
};
s3Bucket.putObject(data, function(err, data){
if (err) {
console.log(err);
console.log('Error uploading data: ', data);
} else {
res.send(data);
console.log('successfully uploaded the image!');
}
});
// res.send(base64data)
});
ich erfolgreich die Daten auf Amazon S3 senden und meine Image-Datei auf dem heißen Stein jedoch sehen, wenn ich versuche, das zu besuchen Link, um das eigentliche Bild selbst zu sehen, oder ziehen Sie es in meine React Native App, bekomme ich nichts.
dh Wenn ich die URL oben besuchen, nachdem es in Amazon S3 erhalte ich:
https://s3.amazonaws.com/my_bucket_name/test_img
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>BCE6E07705CF61B0</RequestId>
<HostId>
aF2l+ucPPHRog1QaaXjEahZePF0A9ixKR0OTzlogWFHYXHUMUeOf2uP7D/wtn7hu3bLWG8ulKO0=
</HostId>
</Error>
Ich habe Bilder manuell gleichen Eimer hochgeladen und ihre Links erscheinen in Ordnung, und ich bin zusätzlich in der Lage um sie in meine React Native-Anwendung zu ziehen, ohne Probleme beim Anzeigen.
Meine Frage ist, was mache ich falsch zwischen dem Abrufen der Base64-Zeichenfolge Daten und Senden an meinen Express-Server zum Speichern in meinem Eimer? Muss die Base64-Zeichenfolge codiert werden? Muss ich die base64-Zeichenfolge in einen Blob konvertieren, bevor ich sie an Express sende?
Danke für die Hilfe!
Subscribing, ich brauche das auch –