Exemple de tutoriel de téléchargement d'images NodeJS

Cet article présente principalement le code de téléchargement d'images NodeJS (Express). L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Le téléchargement de fichiers est inévitable pour chaque site Web. Récemment, nous devons faire quelque chose pour télécharger des images. Nous résolvons principalement deux problèmes. style de téléchargement. Et enregistrez le chemin du serveur, la fonction est très simple, mais ce n'est pas si simple à faire. Commençons par le style de page de téléchargement de la page la plus simple.

Style de page

Le téléchargement par défaut de la page HTML est relativement moche. Vous devez refaire une image de fond et ajouter celle téléchargée via. l'image d'arrière-plan. Image :

Télécharger le style d'image :

<p class="upload-container">

  <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" />

</p>

Style CSS :

.upload-container {

  background-image: url(../../images/rv/add.jpg);

  background-repeat: no-repeat;

  width: 180px;

  height: 200px;

  padding-bottom: 10px;

  display: inline-block;

  vertical-align: middle;

  .fileupload {

    opacity: 0;

    filter: alpha(opacity=0);

    width: 200px;

    height: 200px;

  }

}

Le téléchargement par clic HTML a deux méthodes courantes : le téléchargement iFrame et le téléchargement Ajax. Cet article utilise le téléchargement Ajax car HTML5 propose le XMLHttpRequest. Dans la deuxième version, le transfert des données du fichier est principalement implémenté via FormData :

$('.fileupload').change(function(event) {

  /* Act on the event */

  if ($('.fileupload').val().length) {

    var fileName = $('.fileupload').val();

    var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();

    if (extension == ".jpg" || extension == ".png") {

        var data = new FormData();

        data.append('upload', $('#fileToUpload')[0].files[0]);

        $.ajax({

          url: 'apply/upload',

          type: 'POST',

          data: data,

          cache: false,

          contentType: false, //不可缺参数

          processData: false, //不可缺参数

          success: function(data) {

            console.log(data);

          },

          error: function() {

            console.log('error');

          }

        });

    } 

  }

});

Sauvegarde côté serveur.

La sauvegarde côté serveur NodeJS nécessite l'utilisation du plug-in tiers node-formidable, adresse d'installation npm :

npm install formidable@latest

Télécharger des images

var cacheFolder = &#39;public/images/uploadcache/&#39;;<br>exports.upload = function(req, res) {

  var currentUser = req.session.user;

  var userDirPath =cacheFolder+ currentUser.id;

  if (!fs.existsSync(userDirPath)) {

    fs.mkdirSync(userDirPath);

  }

  var form = new formidable.IncomingForm(); //创建上传表单

  form.encoding = &#39;utf-8&#39;; //设置编辑

  form.uploadDir = userDirPath; //设置上传目录

  form.keepExtensions = true; //保留后缀

  form.maxFieldsSize = 2 * 1024 * 1024; //文件大小

  form.type = true;

  var displayUrl;

  form.parse(req, function(err, fields, files) {

    if (err) {

      res.send(err);

      return;

    }

    var extName = &#39;&#39;; //后缀名

    switch (files.upload.type) {

      case &#39;image/pjpeg&#39;:

        extName = &#39;jpg&#39;;

        break;

      case &#39;image/jpeg&#39;:

        extName = &#39;jpg&#39;;

        break;

      case &#39;image/png&#39;:

        extName = &#39;png&#39;;

        break;

      case &#39;image/x-png&#39;:

        extName = &#39;png&#39;;

        break;

    }

    if (extName.length === 0) {

      res.send({

        code: 202,

        msg: &#39;只支持png和jpg格式图片&#39;

      });

      return;

    } else {

      var avatarName = &#39;/&#39; + Date.now() + &#39;.&#39; + extName;

      var newPath = form.uploadDir + avatarName;

      displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName;

      fs.renameSync(files.upload.path, newPath); //重命名

      res.send({

        code: 200,

        msg: displayUrl

      });

    }

  });

};

Différents utilisateurs les téléchargent et les placent à différents endroits, qui peuvent être définis en fonction de leurs besoins. Bien entendu, chaque image peut également recevoir un numéro d'identification différent. . Nous recommandons un plug-in uuid tiers : https://github.com/broofa/node-uuid

Renommer le fichier :

fs.renameSync(files.upload.path, newPath); //重命名

<.>Progression du téléchargement des fichiers :

form.on('progress', function(bytesReceived, bytesExpected) {

});

node-formidable possède de nombreuses API officielles et de nombreuses options de paramétrage. Cet article définit plusieurs paramètres en fonction des besoins. , vous pouvez vous référer à l'adresse officielle~

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!