Estoy tratando de enviar una imagen desde el script de front-end a mi servidor.
Guión de front-end:
var img_data = canvas.toDataURL('image/jpg'); // contains screenshot image // Insert here POST request to send image to serverY estoy tratando de aceptar los datos en el backend y almacenarlos en req.files para poder acceder de esta manera:
const get_image = (req, res) => { const File = req.files.File.tempFilePath; }¿De qué manera puedo enviar la imagen al servidor y obtener la imagen como en el ejemplo anterior?
su img_data es una cadena base 64, que puede enviar al servidor directamente en una solicitud posterior
p.ej
await fetch('/api/path', { method: 'POST', headers: { "content-type": "application/json"}, body: JSON.stringify({ file: img_data }) });En su backend, puede convertir esta cadena a binaria y guardarla en un archivo.
var fs = require('fs'); app.post('/api/path', async (req, res) => { const img = req.body.file; var regex = /^data:.+\/(.+);base64,(.*)$/; var matches = string.match(regex); var ext = matches[1]; var data = matches[2]; var buffer = Buffer.from(data, 'base64'); //file buffer .... //do whatever you want with the buffer fs.writeFileSync('imagename.' + ext, buffer); //if you do not need to save to file, you can skip this step. ....// return res to client })Primero debe convertirlo en un blob y luego agregarlo a un formulario. El formulario sería el cuerpo de la solicitud que envía al servidor.
canvas.toBlob(function(blob){ var form = new FormData(), request = new XMLHttpRequest(); form.append("image", blob, "filename.png"); request.open("POST", "/upload", true); request.send(form); }, "image/png");