comment envoyer l'image à un serveur http.post en javascript et en magasin en base64 dans mongodb

Il y a un certain nombre de façons que vous pouvez envoyer vos données d'image dans la demande au serveur, mais tous impliquent l'appel de la send méthode de votre objet XMLHttpRequest avec les données que vous souhaitez envoyer en argument.

La send méthode à la fois envoie la demande au serveur distant, et définit son argument que le corps de la requête. Depuis que vous êtes enceinte, encodé en Base64 des données d'image sur votre serveur, vous devez d'abord convertir votre fichier image en Base64 des données sur le client.

La façon la plus simple pour convertir une image en Base64 sur le client est en chargement de l'image comme un élément de l'image, le dessin d'un élément canvas, et de la représentation Base64 de la toile les données de l'image.

Qui pourrait ressembler à celui-ci (étant donné que l'URL de l'image d'origine est stockée dans une variable nommée imgsrc, et le nom est stocké dans name comme indiqué):

//This function accepts three arguments, the URL of the image to be 
//converted, the mime type of the Base64 image to be output, and a 
//callback function that will be called with the data URL as its argument 
//once processing is complete
var convertToBase64 = function(url, imagetype, callback){
var img = document.createElement('IMG'),
canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
data = '';
//Set the crossOrigin property of the image element to 'Anonymous',
//allowing us to load images from other domains so long as that domain 
//has cross-origin headers properly set
img.crossOrigin = 'Anonymous'
//Because image loading is asynchronous, we define an event listening function that will be called when the image has been loaded
img.onLoad = function(){
//When the image is loaded, this function is called with the image object as its context or 'this' value
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
data = canvas.toDataURL(imagetype);
callback(data);
};
//We set the source of the image tag to start loading its data. We define 
//the event listener first, so that if the image has already been loaded 
//on the page or is cached the event listener will still fire
img.src = url;
};
//Here we define the function that will send the request to the server. 
//It will accept the image name, and the base64 data as arguments
var sendBase64ToServer = function(name, base64){
var httpPost = new XMLHttpRequest(),
path = "http://127.0.0.1:8000/uploadImage/" + name,
data = JSON.stringify({image: base64});
httpPost.onreadystatechange = function(err) {
if (httpPost.readyState == 4 && httpPost.status == 200){
console.log(httpPost.responseText);
} else {
console.log(err);
}
};
//Set the content type of the request to json since that's what's being sent
httpPost.setHeader('Content-Type', 'application/json');
httpPost.open("POST", path, true);
httpPost.send(data);
};
//This wrapper function will accept the name of the image, the url, and the 
//image type and perform the request
var uploadImage = function(src, name, type){
convertToBase64(src, type, function(data){
sendBase64ToServer(name, data);
});
};
//Call the function with the provided values. The mime type could also be png
//or webp
uploadImage(imgsrc, name, 'image/jpeg')

Lorsque la demande est reçue par le serveur, le corps de la requête contiendra la chaîne JSON avec votre image en Base64. Puisque vous n'avez pas fourni l'infrastructure de serveur ou de pilote de base de données que vous utilisez pour Mongo, j'ai adapté ton code en supposant que vous êtes à l'aide de l'Express et de la Mangouste avec un ImageType modèle déjà définies dans votre application.

Puisque vous pouvez toujours construire le nom de fichier de l'image, enregistrement à partir de son _id propriété et votre image de chemin d'accès au dossier, il ne fait pas nécessairement sens de sauvegarder que comme une propriété sur le dossier, mais j'ai conservé les fonctionnalités sont là, qui vous demandera de sauvegarder un enregistrement de deux fois dans un cycle de la demande.

J'ai aussi changé la façon dont les erreurs du système de fichiers d'appels sont traités. Le 'err', vous obtenez en retour à partir d'une erreur de système de fichiers est déjà un objet d'Erreur, et devront être traitées par votre serveur, d'une certaine façon.

function postNewImageType(req, res, next){
var json = JSON.parse(req.body),
newImageTypeData = {
name: json.name,
image: "placeholder.png"
},
imageBuffer = decodeBase64Image(data),
newImageType = new ImageType(newImageTypeData);
//First we save the image to Mongo to get an id
newImageType.save(function(err){
if(err) return next(new restify.InvalidArgumentError(JSON.stringify(err.errors)));
var fileName = cfg.imageFolder + newImageType._id + '.jpeg';
fs.writeFile(fileName, imageBuffer.data, function(err){
//Handle error in next middleware function somehow
if (err) return next(err);
newImageType.set({image: 'filename.png'});
newImageType.save(function(err){
if (err) return next(new restify.InvalidArgumentError(JSON.stringify(err.errors)));
res.send(201, imagetype);
});
})
});
}

OriginalL'auteur RickyTomatoes