node+vue用户头像处理上传并保存

2017年7月14日19:21:29 ，最近做个网站，需要有用户头像裁剪上传功能，具体流程是用户在本地选择图片，前端将图片裁剪好发给后端，后端接收到图片将它保存起来，并将信息存入数据库。

先说一下环境后端是express，前端是vue-cli2.0 做的单文件网站。

模块选用：前端用 vue-image-crop-upload^1.3.14 后端用multer^1.3.0"，数据库mysql,在这里不是重点省去。

首先请安装这两个模块，然后上代码了：

前端代码：

后端代码：

 var apiRouter = express.Router();
 //4. 图片上传
 var multer = require('multer')
 var storage = multer.diskStorage({
 destination: function (req, file, cb) {
 cb(null, './uploads') /上传文件放入的路径，这个根路径是项目的根路径。/
 },
 filename: function (req, file, cb) {
 var fileFormat = (file.originalname).split(".");
 cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
 }
 });
 var upload = multer({
 storage: storage
 });
 /upload.single('avatar')， avatar是图片的name/
 apiRouter.post('/profile', upload.single('avatar'), function (req, res, next) {
 if (req.file) {
 res.send({res:"图片上传成功"})
 }
 });
 app.use('/api', apiRouter);
 

到此完成，这两个模块完美的融合在一起，不需要修改代码。Multer模块说只支持用于处理 multipart/form-data 类型的表单数据,所以在找前端模块的时候有点担心，然后查看了vue-image-crop-upload的代码，发现作者用的是formDate打包的文件,然后用XMLHttpRequest上传的，这样处理两个模块就兼容了，无需担心。