最近在项目中遇到了一个挺棘手的问题:页面无刷新修改头像。头疼了很久,上网找了很久,终于找到了解决办法,可以在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