NodeJS 이미지 업로드 예제 튜토리얼

이 글에서는 주로 NodeJS 이미지 업로드 코드(Express)를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다.

파일 업로드는 모든 웹사이트에서 불가피합니다. 최근에는 사진을 업로드하기 위해 몇 가지 기능을 수행해야 합니다. 그 중 하나는 파일 업로드 스타일과 서버 경로 저장입니다. 매우 기능적이지만 그렇게 간단하지는 않습니다. 가장 간단한 페이지의 업로드 페이지 스타일부터 시작해 보겠습니다.

페이지 스타일

기본으로 업로드되는 HTML 페이지는 상대적으로 보기 흉합니다. 배경 이미지를 다시 실행하고 배경 이미지를 통해 업로드된 이미지를 추가해야 합니다.

업로드된 이미지 스타일:

<p class="upload-container">

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

</p>

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;

  }

}

Html 클릭 업로드 두 가지 일반적인 방법이 있습니다: iFrame 업로드와 Ajax 업로드. 이 글에서는 주로 HTML5에서 제안하는 XMLHttpRequest 객체의 두 번째 버전인 Ajax 업로드를 사용합니다. 파일 데이터를 전송합니다:

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

          }

        });

    } 

  }

});

서버 측 저장

NodeJS 서버 측 저장에는 타사 플러그인 노드 형성 가능, npm 설치 주소를 사용해야 합니다.

npm install formidable@latest

사진 업로드

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

      });

    }

  });

};

다양한 사용자가 사진을 업로드하고 필요에 따라 설정할 수 있는 다른 위치에 배치할 수도 있습니다. 타사 uuid 플러그인: https://github.com/broofa/node-uuid

파일 이름 변경:

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

파일 업로드 진행률:

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

});

node-formidable 공식 API가 많이 있습니다 그리고 다양한 설정 옵션이 있습니다. 이 글에서는 필요에 따라 여러 가지를 설정합니다. 추가로 필요한 사항이 있으면 공식 주소를 참조하세요~

위 내용은 NodeJS 이미지 업로드 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!