MEAN Stack File uploads

J’ai récemment commencé à programmer avec MEAN Stack et je suis en train de mettre en place une sorte de réseau social. J’utilise le framework MEAN.io pour le faire. Mon principal problème actuellement est de faire en sorte que le téléchargement de fichier fonctionne, car ce que je veux, c’est recevoir le fichier du formulaire dans le contrôleur AngularJS et le transmettre avec plus d’informations à ExpressJS afin que je puisse enfin tout envoyer à MongoDB. (Je suis en train de créer un nouveau registre d’utilisateurs).

Je ne veux pas stocker le fichier lui-même sur la firebase database, mais je veux stocker un lien vers celui-ci.

J’ai cherché des dizaines de pages sur Google avec différentes requêtes de recherche, mais je n’ai rien trouvé que je puisse comprendre ou travailler. A cherché pendant des heures sans résultat. C’est pourquoi je suis venu ici.

Est-ce que quelqu’un peut m’aider avec ça?

Merci 🙂

EDIT: Peut-être qu’un peu du code aiderait à comprendre.

Le contrôleur angular par défaut des utilisateurs MEAN.io que j’utilise en tant que fondation a ceci:

$scope.register = function(){ $scope.usernameError = null; $scope.registerError = null; $http.post('/register', { email: $scope.user.email, password: $scope.user.password, confirmPassword: $scope.user.confirmPassword, username: $scope.user.username, name: $scope.user.fullname })//... has a bit more code but I cut it because the post is the main thing here. };

Ce que je veux faire, c’est: recevoir un fichier depuis un formulaire sur ce contrôleur et le transmettre avec l’email, le mot de passe, le nom, etc., etc. et pouvoir utiliser le json sur expressjs, qui se trouve du côté du serveur. Le ‘/ register’ est une route de noeud, donc un contrôleur de serveur qui crée l’utilisateur (avec le schéma d’utilisateur) et l’envoie à MongoDB.

J’ai récemment fait quelque chose comme ça. J’ai utilisé angular-file-upload . Vous voudrez également que votre noeud final comprenne plusieurs parties pour parsingr les données du formulaire. Ensuite, vous pouvez utiliser s3 pour télécharger le fichier sur s3.

Voici quelques-uns de mes codes [modifiés].

Gabarit angular

Contrôleur angular

 $scope.onFileSelect = function(image) { $scope.uploadInProgress = true; $scope.uploadProgress = 0; if (angular.isArray(image)) { image = image[0]; } $scope.upload = $upload.upload({ url: '/api/v1/upload/image', method: 'POST', data: { type: 'profile' }, file: image }).progress(function(event) { $scope.uploadProgress = Math.floor(event.loaded / event.total); $scope.$apply(); }).success(function(data, status, headers, config) { AlertService.success('Photo uploaded!'); }).error(function(err) { $scope.uploadInProgress = false; AlertService.error('Error uploading file: ' + err.message || err); }); };

Route

 var uuid = require('uuid'); // https://github.com/defunctzombie/node-uuid var multiparty = require('multiparty'); // https://github.com/andrewrk/node-multiparty var s3 = require('s3'); // https://github.com/andrewrk/node-s3-client var s3Client = s3.createClient({ key: '', secret: '', bucket: '' }); module.exports = function(app) { app.post('/api/v1/upload/image', function(req, res) { var form = new multiparty.Form(); form.parse(req, function(err, fields, files) { var file = files.file[0]; var contentType = file.headers['content-type']; var extension = file.path.subssortingng(file.path.lastIndexOf('.')); var destPath = '/' + user.id + '/profile' + '/' + uuid.v4() + extension; var headers = { 'x-amz-acl': 'public-read', 'Content-Length': file.size, 'Content-Type': contentType }; var uploader = s3Client.upload(file.path, destPath, headers); uploader.on('error', function(err) { //TODO handle this }); uploader.on('end', function(url) { //TODO do something with the url console.log('file opened:', url); }); }); }); }

J’ai changé cela à partir de mon code, donc ça ne fonctionnera peut-être pas, mais j’espère que c’est utile!

Récemment, un nouveau paquet a été ajouté à la liste des paquets sur mean.io. C’est une beauté!

Il suffit de lancer:

$ mean install mean-upload

Cela installe le paquet dans le dossier du noeud mais vous avez access aux directives de vos paquets.

http://mean.io/#!/packages/53ccd40e56eac633a3eee335

Sur votre formulaire, ajoutez quelque chose comme ceci:

   Images  
   {{image.name}}

Et dans votre contrôleur:

  $scope.uploadFileArticleCallback = function(file) { if (file.type.indexOf('image') !== -1){ $scope.article.images.push({ 'size': file.size, 'type': file.type, 'name': file.name, 'src': file.src }); } else{ $scope.article.files.push({ 'size': file.size, 'type': file.type, 'name': file.name, 'src': file.src }); } }; $scope.deletePhoto = function(photo) { var index = $scope.article.images.indexOf(photo); $scope.article.images.splice(index, 1); }

Prendre plaisir!

Mean-upload a été obsolète et s’appelle maintenant “upload”. Il est géré dans – https://git.mean.io/orit/upload

Je sais que ce post est vieux. Je suis tombé dessus et @kentcdodds avait une réponse qui me plaisait beaucoup, mais les bibliothèques qu’il a utilisées sont maintenant obsolètes et je ne pouvais pas les faire fonctionner. Après quelques recherches, j’ai une nouvelle solution similaire à partager.

HTML utilisant ng-upload

INCLUDE ng-upload module

téléchargez-le, référencez les fichiers et incluez le module

 var app = angular.module('app', ['ngFileUpload']);

Cela vous donnera access au service de Upload .

Code du contrôleur

 $scope.uploadFiles = function(file, errFiles) { $scope.f = file; $scope.errFile = errFiles && errFiles[0]; if (file) { file.upload = Upload.upload({ url: 'you-api-endpoint', data: {file: file} }); //put promise and event watchers here if wanted } };

Code api NODE

Tout le code ci-dessous est dans un fichier de route séparé route required dans le fichier principal server.js.

require('./app/app-routes.js')(app, _);

 var fs = require('fs'); var uuid = require('uuid'); var s3 = require('s3fs'); // https://github.com/RiptideElements/s3fs var s3Impl = new s3('bucketname', { accessKeyId: '', secretAccessKey: '< your secret access key >' }); var multiparty = require('connect-multiparty'); var multipartyMiddleware = multiparty(); module.exports = function(app, _) { app.use(multipartyMiddleware); app.post('/your-api-endpoint',function(req, res){ var file = req.files.file; // multiparty is what allows the file to to be accessed in the req var stream = fs.createReadStream(file.path); var extension = file.path.subssortingng(file.path.lastIndexOf('.')); var destPath = '/' + req.user._id + '/avatar/' + uuid.v4() + extension; var base = 'https://you-bucket-url'; return s3Impl.writeFile(destPath, stream, {ContentType: file.type}).then(function(one){ fs.unlink(file.path); res.send(base + destPath); }); });

Tout ce que j’essayais de faire était de télécharger un avatar unique pour un utilisateur. J’espère que cela t’aides!!