Comment utiliser le téléchargement Multer-js tutoriel-php.cn

Comment utiliser le téléchargement Multer

php中世界最好的语言

Libérer： 2018-04-16 11:43:18

original

1445 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser multer upload, et quelles sont les précautions lors de l'utilisation de multer upload. Voici un cas pratique, jetons un coup d'œil.

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 épiphanique. De plus, je ne suis plus confus sur le nœud. 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 entre mongodb et la base de données mysql. Bien qu'il puisse être utilisé, c'est quand même bizarre. Je souhaite donc d'abord utiliser le framework existant, puis apprendre le nœud à l'envers.

Quant au cadre, j'ai choisi express.

L'essentiel est de tester le middleware mentionné dans plusieurs livres. Il a été écrit un peu tôt, et de nombreuses API sont obsolètes. J'ai suivi le site officiel pour trouver des endroits mis à jour petit à petit.

Ce que je trouve actuellement utile, ce sont : 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.

Mettez 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')

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('file');
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append('myfile', file)
      xhr.open('post', '/public/index.html')
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById('result').innerHTML = this.response
          document.getElementById('img').src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>
</html>

Copier après la connexion

Je ne veux pas faire référence à la bibliothèque jquery, j'ai donc écrit en ajax natif. De manière générale, 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 transmis à Backstage.

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

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

Copier après la connexion

En fait, j'ai utilisé cette ligne de code au début. dest signifie choisir un chemin pour stocker le fichier, mais il y a un petit problème avec l'écriture de cette façon. Le fichier enregistré n'a pas de suffixe.

Quand je rends les 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 image en tant qu'avatar, mais la prochaine fois que j'accède à ma page personnelle, les données qui me sont renvoyées par l'arrière-plan ne peuvent pas être utilisées comme adresse de l'image, ce qui est le cas. est très gênant. J'ai donc trouvé une raison sur Internet et remplacé le commentaire de code ci-dessus par celui-ci :

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

Copier après la connexion

destination est l'adresse où le fichier est stocké, et filename définit le nom du fichier S'il est écrit comme ceci ici :

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

Copier après la connexion

. Vous constaterez que le nom de chaque image que vous transmettez est myfile.png et que la nouvelle écrase l'ancienne. 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du composant éditeur de texte de BootStrap Summernote

Composant de recherche d'opération à afficher sur le clavier

Jquery soumet les données du tableau en utilisant la méthode de réception springmvc

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!