Bild hochladen - Wie bekomme ich das richtige Format von Bilddaten für die serverseitige Verarbeitung

Question

Ich verwende sharp Bilder auf der Serverseite und react dropzone zu verarbeiten, um die Bilddatei zu erhalten. Wenn ich die Datei auf den Server von Dropzone zu veröffentlichen, habe ich den Blob des request.body aus, die wie folgt aussieht:

{ preview: 'blob:http%3A//127.0.0.1%3A3000/1451580a-b24f-478f-a9f7-338c0d790829' }

Optional bevor ich Daten an den Server senden kann ich Filereader (oder etwas sonst) etwas mit der Bilddatei zu tun, anstatt es in einen Blob zu verwandeln.

Sharp nimmt:

• einem Puffer, JPEG, PNG, WebP, GIF, SVG, TIFF
• Raw Pixelbilddaten
• Ein String, der den Pfad zu einer Bilddatei enthält, mit den meisten großen Formate unterstützt.

Wie kann ich verwenden, was ich habe, scharfe ein unterstütztes Format zu bieten?

Answer 1

Ich empfehle, ein node.js-Modul namens Multer auszuprobieren, um Ihnen den Zugriff auf Ihre Fotodatei auf Ihrem Server zu erleichtern.

https://github.com/expressjs/multer

Zuerst auf dem Client, möchten Sie Ihre Datei in ein FormData Objekt wie folgt anhängen:

// obtain the file from your react dropzone and save it to this file variable 
const file = dropzone.file // not sure how you do this with react dropzone 
const data = new FormData() 
data.append('photo', file) 

Dann werden Sie diese senden Formulardaten an den Server-Objekt. Auf dem Server verwenden Sie Multer auf der Route, die Sie für die Verarbeitung des Fotos verwenden.

Stellen Sie sicher, dass Sie npm multer installieren, und es auf Ihrem Server oder Routen-Datei benötigen. Wenn Sie eine einzelne Datei senden, verwenden Sie die "single" -Multermethode. Wenn Sie etwas anderes machen möchten, sehen Sie sich die API-Dokumentation an.

app.post('/photos', multer().single('photo'), controller.processPhoto); 

In diesem Beispiel Routen sind Sie eine POST-Anfrage Senden an/Fotos, multer mit einem Formdata Schlüssel ‚Foto‘ für eine Datei sucht und dass auf das Request-Objekt angehängt wird.

Dann haben Sie Zugriff auf das Bild als eine Eigenschaft des Request-Objekts, auf req.file in dieser erfundenen "controller.processPhoto" -Methode. Mit diesem können Sie leicht auf eine Menge guter Informationen einschließlich des Bildpuffers req.file.buffer zugreifen, der wie es klingt, wie Sie brauchen. (auch Mimetype, Originalname usw.)

Das sollte genug sein, um Sie zu beginnen.