Beispiel-Tutorial zum Hochladen von NodeJS-Bildern

In diesem Artikel wird hauptsächlich der von NodeJS implementierte Bild-Upload-Code (Express) vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Das Hochladen von Dateien ist für jede Website unumgänglich. Wir müssen vor allem zwei Probleme lösen Upload-Stil. Und den Serverpfad speichern. Die Funktion ist sehr einfach, aber nicht so einfach. Beginnen wir mit dem Upload-Seitenstil der einfachsten Seite.

Seitenstil

Der Standard-Upload der HTML-Seite ist relativ hässlich. Sie müssen ein Hintergrundbild wiederholen und das hochgeladene hinzufügen das Hintergrundbild. Bild:

Bildstil hochladen:

<p class="upload-container">

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

</p>

CSS-Stil:

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

  }

}

HTML-Click-Upload hat zwei gängige Methoden: iFrame-Upload und Ajax-Upload, da HTML5 XMLHttpRequest vorschlägt Objekt. In der zweiten Version werden Dateidaten hauptsächlich über FormData übertragen:

$('.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');

          }

        });

    } 

  }

});

Serverseitige Speicherung

Für das serverseitige Speichern von NodeJS ist die Verwendung des Node-Formidable-Plug-ins eines Drittanbieters erforderlich, npm-Installationsadresse:

npm install formidable@latest

Bilder hochladen

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

      });

    }

  });

};

Verschiedene Benutzer laden sie hoch und platzieren sie an verschiedenen Orten, die je nach Bedarf festgelegt werden können. Natürlich kann jedes Bild auch mit einer anderen ID-Nummer versehen werden. Wir empfehlen ein UUID-Plug-in eines Drittanbieters: https://github.com/broofa/node-uuid

Datei umbenennen:

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

Datei-Upload-Fortschritt:

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

});

node-formidable verfügt über viele offizielle APIs und viele Einstellungsoptionen. Wenn Sie zusätzliche Anforderungen haben, werden in diesem Artikel verschiedene Einstellungen festgelegt. Sie können sich auf die offizielle Adresse beziehen~

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zum Hochladen von NodeJS-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!