使用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　　

转载于:https://www.cnblogs.com/sxcflyhigher/p/6435105.html