télécharger l'image sans formulaire en utilisant ng-click

Question

J'utilise actuellement ce code de travail pour télécharger le fichier. Mais je voudrais utiliser ng-click() pour envoyer plus de choses de mon contrôleur avec $ post http. Une entrée simple avec un bouton sera le meilleur.

côté html:

<form method="post" enctype="multipart/form-data" action="/productimage"> 
     <p> 
     <input type="file" id="imgadd" name="upl"/> 
     </p> 
     <p> 
     <input type="submit"/> 
     </p> 
</form> 

côté serveur

:

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
    cb(null, './uploads/products') 
    }, 
    filename: function (req, file, cb) { 
    cb(null, Date.now() + '.jpg') //Appending .jpg 
    } 
}) 

app.post('/productimage', multer({ storage: storage, limits: { fileSize: 200000} }).single('upl'), function(req,res, error){ 
    console.log(req.body); //form fields 
    /* example output: 
    { title: 'abc' } 
    */ 
    console.log(req.file.filename); //form files 
    /* example output: 
      { fieldname: 'upl', 
       originalname: 'grumpy.png', 
       encoding: '7bit', 
       mimetype: 'image/png', 
       destination: './uploads/', 
       filename: '436ec561793aa4dc475a88e84776b1b9', 
       path: 'uploads/436ec561793aa4dc475a88e84776b1b9', 
       size: 277056 } 
    */ 
    res.status(204).end(); 
}); 

Answer 1

Essayez d'utiliser une directive comme ci-dessous

.directive('fileModel', ['$parse', function($parse) { 
     function fn_link(scope, element, attrs) { 
      var onChange = $parse(attrs.fileModel); 
      element.on('change', function (event) { 
       onChange(scope, { $files: event.target.files }); 
      }); 
     }; 
     return { 
      link: fn_link 
     } 
    }]) 

remplacez input type = fichier à

<input type="file" id="fileId" accept="image/*" file-model="myFiles($files)"/> 

puis dans votre contrôleur ajouter cette

var formData = new FormData(); 
$scope.myFiles = function($files) { 
    formData.append('upl', $files[0]); 
} 

Remplacer « UPL » à un nom que vous voulez comme dans backend si vous voulez ajouter quelque chose, ajouter chaque valeurs avec paire de clés de valeur & dans formData d'envoyer comme

formData.append('name', form.name); 
formData.append('title', form.title); 

** Votre image sera directement append mais rappelez-vous que les données doivent être append sur votre fonction qui est appelée par NG-CLICK **

Maintenant, votre méthode $ http

$http.post('/productimage', formData,{headers:{'Content-Type': undefined}}).then(...) 

** Après soumission réussie ne pas oublier de supprimer formData comme ** formData.delete ('nom');

Noeud côté

app.post('/productimage', multer({ storage: storage, limits: { fileSize: 200000} }).single('upl'), function(req,res, error){ 
    console.log(req.body); 
/*{title: 'xyz', name:'abc'} 
*/ 
    console.log(req.file); 
    res.status(204).end(); 
});