图片处理是前后端开发常见的一个功能，最近在使用前后端分离开发方式来开发一个属于自己的网站。采用的技术为前端采用vue.js框架进行开发，后端采用nodejs的express框架。
网站有个功能，就是将表单图片上传到node后端指定的文件夹下。下面我分前后端两个方面实现此功能。
1.前端表单部分
<label>选择图片：</label>
<input ref='chooseImg' name="avatar" id='upfile' type='file'/>
<button @click='submitImg'>点击上传</button>
- js部分
submitImg(){
let file=this.$refs.chooseImg.files[0];
let form_data =new FormData();
form_data.append('avatar',file);
this.$http.post('/api/upload/uploadImage',form_data,{
headers: {
"Content-Type": "multipart/form-data"
}
}).then((res)=>{
alert('上传成功！')
})
},
- node端路由处理
index.js
const express = require('express');
const routerApi = require('./src/router/router.js');
const app = express();
app.use('/api', routerApi);
app.listen(process.env.PORT || 5050);
console.log('app start successful on port:'+(process.env.PORT || 5050));
router.js
var express = require('express');
var router = express.Router();
var api = require('../api/api.js');
var app = express();
router.post('/upload/uploadImage', function (req, res, next) {
api.uploadImages(req, res, next);
});
api.js
var path = require('path'); //路径管理模块
var fs = require('fs'); //文件管理模块
var formidable = require('formidable'); //处理表单模块
var uuid = require('node-uuid'); //生成id模块
// 上传图片并返回路径
uploadImages(req,res,next){
let form = new formidable.IncomingForm();
form.uploadDir = rootDir + '/images/';
form.parse(req, (error, fields, files) => {
if(error){
res.json({
status:false,
msg:'解析图片错误！'
})
}
let result=[];
for(let key in files){ // 遍历上传文件对象
let obj={};
let file = files[key];
let fileName = uuid.v1()+'.jpg'; // 借助uuid模块重新生成唯一id。
let newPath = form.uploadDir + fileName;
fs.renameSync(file.path, newPath); // 新路径替换旧路径。
obj.status='ok';
obj.name=fileName;
result.push(obj);
}
res.json({
status:'ok',
data:result
})
})
},
完！
