recherche

Maison  >  Article  >  interface Web  >  Explication détaillée du téléchargement et de l'utilisation d'Express Multer

Explication détaillée du téléchargement et de l'utilisation d'Express Multer

小云云
小云云original
2018-01-20 10:30:381745parcourir

Cet article présente principalement l'utilisation du téléchargement multer dans la série Express. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Je lis "Le guide définitif de NodeJS" depuis deux jours. Je lis ce livre depuis longtemps, mais je ne l'ai jamais lu attentivement, je l'ai juste lu attentivement. temps.

Il y a encore pas mal de gains, principalement dus à certains détails de l'utilisation de wenpack. C'est un peu une expérience d'épiphanie. De plus, je ne suis plus confus sur node. Mais pour être honnête, il est assez difficile de faire quelque chose directement en utilisant node au niveau actuel. Aujourd'hui, j'ai testé le lien vers la base de données mongodb et mysql. Bien qu'il puisse être utilisé, cela reste bizarre. Je souhaite donc d'abord utiliser le framework existant, puis apprendre le nœud à l'envers.

Pour le framework, j'ai choisi express.

J'ai principalement testé le middleware mentionné dans plusieurs livres. Il a été écrit un peu tôt et de nombreuses API sont obsolètes. Suivez simplement le site officiel. un endroit mis à jour.

Ce que je trouve actuellement utile, c'est : multer et static.

Ce dernier peut déboguer la page localement, ce qui est particulièrement utile pour les pages mobiles.

Cette fois, je parlerai principalement de multer. Je n'ai pas implémenté toutes les fonctions, seulement la fonction de téléchargement d'une seule image, et j'explorerai les autres.

Il s'agit du répertoire complet des fichiers, il y en a deux principaux, l'un est main.js dans le répertoire racine et l'autre est public/index.html.

Placez le code : 


//main.js
let express = require('express');

var multer = require('multer')

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
 })
 
var upload = multer({ storage: storage })

//var upload = multer({ dest: 'public/' })
 

let app = express()

app.use(express.static('public'))

app.post('/public/index.html',upload.single('myfile'),(req,res,next)=>{
  console.log(req.file)
  res.send(req.file)
})

app.listen(3300,'127.0.0.1')


<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" id="file" accept="image/*">
  <p id="result"></p>
  <img src="" alt="" id="img" width="40" height="40">
  <script>
    let file = document.getElementById(&#39;file&#39;);
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append(&#39;myfile&#39;, file)
      xhr.open(&#39;post&#39;, &#39;/public/index.html&#39;)
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById(&#39;result&#39;).innerHTML = this.response
          document.getElementById(&#39;img&#39;).src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>

</html>

Je ne veux pas référencer la bibliothèque jquery , j'ai donc écrit ajax nativement , en général cela ne devrait pas être difficile. Bref, après avoir cliqué sur le bouton pour sélectionner l'image, les informations de l'image seront placées dans un objet avec le nom de la clé myfile et passées en arrière-plan.

express stocke les photos reçues sous le fichier /public/ Il y a un petit écueil ici. Vous pouvez voir que j'ai commenté cette ligne de code en main.js : 


var upload = multer({ dest: &#39;public/&#39; })

En fait, j'ai utilisé cette ligne de code au début, ce qui veut dire dest Il s'agit de choisir un chemin pour stocker le fichier, mais il y a un petit problème à l'écrire de cette façon. Le fichier enregistré n'a pas de suffixe.

Lorsque je renvoie des données à la réception


res.send(req.file)

Ce problème est très grave. Par exemple, dans un scénario, je télécharge une photo comme. un avatar. Mais lorsque j'entrerai dans ma page personnelle la prochaine fois, les données qui me seront renvoyées par l'arrière-plan ne pourront pas être utilisées comme adresse de l'image, ce qui est très gênant. J'ai donc trouvé une raison sur Internet et remplacé le commentaire de code ci-dessus par ceci : 


var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, &#39;public/&#39;);
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + &#39;.png&#39;);
  }
})

var upload = multer({ storage: storage })

destination est l'adresse où le fichier est stocké, et filename settings est le nom du fichier, alors s'il est écrit comme ceci : 


filename: function (req, file, cb) {
 cb(null, file.fieldname + &#39;.png&#39;);
}

vous constaterez que le nom de chaque image que vous transmettez est myfile.png , le nouveau écrase l'ancien. Ainsi, afin de sauvegarder toutes les images transmises, j'utilise Date.now() comme identifiant différent pour chaque image, afin qu'il n'y ait pas d'écrasement.

C'est tout pour l'instant. Je le mettrai à jour la prochaine fois que je téléchargerai plus de photos.

Recommandations associées :

Explication détaillée d'Ajax et de node.js multer pour implémenter la fonction de téléchargement de fichiers

Définition de multer et résumé d'utilisation

Nodejs avancé : exemple de téléchargement de fichiers basé sur express+multer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

mysql node.js 中间件 jquery ajax html express Static date public JS 对象 mongodb 数据库
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des exemples de file d'attente prioritaire JavaScript et de file d'attente circulaireArticle suivant：Explication détaillée des exemples de file d'attente prioritaire JavaScript et de file d'attente circulaire

Articles Liés

Voir plus