vue2+express4圖片上傳

vue2使用[vue-core-image-upload](https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/README.md)插件提供組件。
根據文檔作相應的本地修改
添加我的樣式方便顯示
修改text顯示按鈕文字，提供一個upload請求地址，這裏是本地搭建的express後臺地址。
<vue-core-image-upload v-bind:class="['borderme','pure-button-primary','js-btn-crop']" text="點擊上傳一個圖片" v-bind:crop="false" url="http://127.0.0.1:3000/upload" extensions="png,gif,jpeg,jpg" v-on:click="imageuploaded"></vue-core-image-upload>
引入模塊名修改成-線

import VueCoreImageUpload from 'vue-core-image-upload';
//方法放在
//methods裏面
methods:{
imageuploaded:function(res) {
if (res.errcode == 0) {
}
},
}

 

expres4環境
使用formidable中間件。
routes文件夾裏建立upload.js文件
配置app.js路由，使用commejs引入upload.js文件，var upload = require('./route/upload')
配置路由app.use('upload')

upload.js
引入formidable模塊，根據api寫代碼接收前端發來的請求

router.post('/',(req,res,next)=>{
// if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
// parse a file upload
var form = new formidable.IncomingForm();
form.uploadDir = "./uploads";
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
res.end(util.inspect({fields: fields, files: files}));
});
return;
// }
})

前端上傳以後會返回數據，文件會寫入指定的uploadDir目錄