使用Ajax+nodejs實現頁面頭像上傳功能

最近在項目中遇到了一個挺棘手的問題：頁面無刷新修改頭像。頭疼了很久，上網找了很久，終於找到了解決辦法，可以在express框架中在請求一個fs模塊，動態的去創建地址和改變圖片命名。

ajax推薦使用jq的ajax方法，其中contentType、processData兩個選項必須將參數設置為false。

而NodeJS服務端保存需要使用了第三方插件node-formidable,npm安裝:npm install formidable --save

路由代碼如下：

var express = require('express');
var router = express.Router();
var fs = require('fs');
var formidable = require('formidable');
var cacheFolder = 'public/images/';

router.post('/',  function ( req, res,next ) {
  var userDirPath =cacheFolder+ "Img";
  if (!fs.existsSync(userDirPath)) {
      fs.mkdirSync(userDirPath);
  }
  var form = new formidable.IncomingForm(); //創建上傳表單
  form.encoding = 'utf-8'; //設置編輯
  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) {
         return res.json(err);
      }
      var extName = ''; //后綴名
      switch (files.upload.type) {
          case 'image/pjpeg':
              extName = 'jpg';
              break;
          case 'image/jpeg':
              extName = 'jpg';
              break;
          case 'image/png':
              extName = 'png';
              break;
          case 'image/x-png':
              extName = 'png';
              break;
      }
      if (extName.length === 0) {
          return  res.json({
              msg: '只支持png和jpg格式圖片'
          });
      } else {
          var avatarName = '/' + Date.now() + '.' + extName;
          var newPath = form.uploadDir + avatarName;
          fs.renameSync(files.upload.path, newPath); //重命名
          return res.json(true);
      }
  });
});

module.exports = router;

感謝原文作者：http://www.tuicool.com/articles/Z7rIzmJ