NodeJS image uploading example tutorial

This article mainly introduces the NodeJS image upload code (Express). The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

File upload is inevitable for every website. Recently, we need to do some functions to upload pictures. We mainly solve two problems. One is the file upload style. And save the server path, the function is very simple, but it is not that simple to do. Let’s start with the upload page style of the simplest page.

Page style

The default upload of the Html page is relatively ugly. You need to redo a background image and add the uploaded one through the background image. Image:

Upload image style:

##

<p class="upload-container">

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

</p>

CSS style:

.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 has two common methods: iFrame upload and Ajax upload. This article uses Ajax upload, which is the second version of the XMLHttpRequest object proposed by HTML5. Transferring file data is mainly implemented through 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');

          }

        });

    } 

  }

});

Server-side save

NodeJS server-side save You need to use the third-party plug-in node-formidable, npm installation address:

npm install formidable@latest

Upload pictures

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

      });

    }

  });

};

Different users Upload is placed in different locations and can be set according to needs. Of course, each picture can also be given a different ID number. We recommend a third-party uuid plug-in: https://github.com/broofa/node-uuid

File rename:

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

File upload progress:

##

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

});

node-formidable There are many official APIs as well There are many setting options. This article sets several according to the needs. If you have additional needs, you can refer to the official address~

The above is the detailed content of NodeJS image uploading example tutorial. For more information, please follow other related articles on the PHP Chinese website!