发布日期 » 2017年11月22日 星期三

版权声明 » 帅华君原创文章,未经允许不得转载。

Nodejs文件上传

服务端配置:

  • Nodejs运行时环境。
  • express框架。
  • fs:文件系统内置模块 。
  • multer:处理文件上传的第三方模块。
  • jimp:处理图像文件的第三方模块。

如果需要安装,可以执行下方的命令来安装这两个第三方模块。

npm install --save multer jimp

前端配置:

  • pug

    input(type="file",id="update_file_input",multiple)
    
  • js

    var update_file_input = document.querySelector('#update_file_input');
    update_file_input.addEventListener('change',function(e){
      postFile(Array.prototype.slice.call(this.files,0));
    },false);
    
    function postFile(files){
      var formData = new FormData()
      files.forEach(function(item){
          formData.append('csh_files',item);
      });
      var client = new XMLHttpRequest();
      client.responseType = 'json';
      client.onreadystatechange = function(){
          if(client.status == 200 && client.readyState == 4){
              console.log(client.response);
          }
      };
      client.open('POST','/api/upload_file/',true);
      client.send(formData);
    }
    
  • server-api

    var express = require('express');
    var fs = require('fs');
    var multer = require('multer');
    var jimp = require('jimp');
    var api = express.Router();
    const deleteFile = (filname,cb)=>{
      fs.unlink(filname,(e)=>{
          cb(e);
      });
    }
    const processFiles = (files,newPath,index)=>{
      if(index === undefined){
          index = 0;
      }
      var file = files[index++];
      var extensionName = file.mimetype.split('/')[1];
      extensionName=='jpeg'?extensionName='jpg':null;
      var filename = file.filename;
      var newFilename = `${newPath}/${filename}.${extensionName}`;
      var newthumbFilename = 
        `${newPath}/thumb_img/${filename}.${extensionName}`;
      var path = file.path;
      if(extensionName == 'gif'){
          var readStream = fs.createReadStream(path);
          var writeStream = fs.createWriteStream(newFilename);
          readStream.pipe(writeStream);
          var writeThumbStream = fs.createWriteStream(newthumbFilename);
          readStream.pipe(writeThumbStream);
      fs.unlink(path,(e)=>{});
      }else{
          jimp.read(path,(e, img)=>{
              img.write(newFilename);
              img.resize(70, jimp.AUTO)
                  .write(newthumbFilename);
              fs.unlink(path,(e)=>{});
          });
      }
      if(index == files.length) return;
      processFiles(files,newPath,index);
    }
    api.post('/upload_file/',multer({dest:'static/gallery/temp/'}).array('csh_files',9),(req,res)=>{
      var sign = (new Date()).getTime();
      var newPath = `${__dirname}/static/gallery/${sign}`;
      var files = req.files;
      fs.mkdir(newPath,(e)=>{
          fs.mkdir(newPath+'/thumb_img/',(e)=>{
              processFiles(files,newPath);
              res.json({
                  flag:true
              });
          });
      });
    });
    module.exports = api;