recherche

Maison  >  Article  >  interface Web  >  Comment utiliser le téléchargement Multer

Comment utiliser le téléchargement Multer

php中世界最好的语言
php中世界最好的语言original
2018-04-16 11:43:181417parcourir

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

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

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)

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

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

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

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：Analyse de la file d'attente prioritaire et de la file d'attente circulaire de JSArticle suivant：Analyse de la file d'attente prioritaire et de la file d'attente circulaire de JS

Articles Liés

Voir plus