圖片處理是前后端開發(fā)常見的一個功能，最近在使用前后端分離開發(fā)方式來開發(fā)一個屬于自己的網(wǎng)站。采用的技術(shù)為前端采用vue.js框架進行開發(fā)勾栗，后端采用nodejs的express框架苍苞。
網(wǎng)站有個功能，就是將表單圖片上傳到node后端指定的文件夾下筒饰。下面我分前后端兩個方面實現(xiàn)此功能缴啡。
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
})
})
},
完！
