Explication détaillée du téléchargement et de l'utilisation d'Express Multer-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-20 10:30:38

original

1755 Les gens l'ont consulté

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(&#39;express&#39;);

var multer = require(&#39;multer&#39;)

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 })

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

let app = express()

app.use(express.static(&#39;public&#39;))

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

app.listen(3300,&#39;127.0.0.1&#39;)

Copier après la connexion

<!-- 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>

Copier après la connexion

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; })

Copier après la connexion

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)

Copier après la connexion

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 })

Copier après la connexion

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;);
}

Copier après la connexion

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!