angular2+nodejs做出图片上传效果

nodejs 后台代码

 代码如下 
varexpress = require("express");
//网络请求模块
varrequest = require("request");
//引入nodejs文件系统模块
const fs = require('fs');
//引入body-parser
//包含在请求正文中提交的键/值对数据。
//默认情况下，它是未定义的，并在使用body-parser中间件时填充。
varbodyParser = require('body-parser');
varapp = express();
//解析 application/x-www-form-urlencoded，limit:?mb'用于设置请求的大小
//解决nodejs Error: request entity too large问题
app.use(bodyParser.urlencoded({ limit:?mb',extended:true}));
//设置跨域访问
app.all('*',function(req, res, next) {
 res.header("Access-Control-Allow-Origin","*");
 res.header("Access-Control-Allow-Headers","X-Requested-With");
 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
 res.header("Content-Type","application/json;charset=utf-8");
 next();
});
//上传图片
app.post('/upload',function(req,res){
 varimgData = req.body.url;
 varbaseData = imgData.replace(/^data:image/w+;base,/,"");
 vardataBuffer =newBuffer(baseData,'base');
 fs.writeFile("image.png", dataBuffer,function(err) {
 if(err){
 res.send(err);
 }else{
 res.send("保存成功！");
 }
 });
})
 
varserver = app.listen(4444,function() {
 console.log('监听端口 4444');
});

angular2前台代码

//上传图片
 /*
 * let data = {
 * size: ?',
 * type: 'image/jpeg',
 * name: 'test.jpg',
 * url: base
 * };
 *获取图片的base码可以通过FileReader获取
 */
 uploadImage(data) {
 returnnewPromise((resolve, reject) => {
 let headers =newHeaders({
 'Content-Type':'application/x-www-form-urlencoded'
 });
 let options =newRequestOptions({
 headers: headers
 });
 this.http.post("http://localhost:4444/upload",this.toQueryString(data),options)
 .map(res => res.json())
 .subscribe(data => { resolve(data), error => { reject(error) } })
 })
 }
// JSON参数序列化
 private toQueryString(obj) {
 let result = [];
 for(let keyinobj) {
 key = encodeURIComponent(key);
 let values = obj[key];
 if(values && values.constructor == Array) {
 let queryValues = [];
 for(let i = 0, len = values.length, value; i < len; i++) {
 value = values[i];
 queryValues.push(this.toQueryPair(key, value));
 }
 result = result.concat(queryValues);
 }else{
 result.push(this.toQueryPair(key, values));
 }
 }
 returnresult.join('&');
 }
 private toQueryPair(key, value) {
 if(typeofvalue =='undefined') {
 returnkey;
 }
 returnkey +'='+ encodeURIComponent(value ===null?'': String(value));
 }

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

JS实现下拉菜单登录注册弹窗

怎么处理http被劫持浮动广告

提高Node.js性能方法总结