angular2+nodejs实现图片上传功能
在使用angular2进行图片上传的时候，遇到了各种各样的问题。在多番尝试之后最终成功上传图片，下面将我的方法分享给大家：
nodejs后台代码
varexpress=require("express");
//网络请求模块
varrequest=require("request");
//引入nodejs文件系统模块
constfs=require('fs');
//引入body-parser
//包含在请求正文中提交的键/值对数据。
//默认情况下，它是未定义的，并在使用body-parser中间件时填充。
varbodyParser=require('body-parser');
varapp=express();
//解析application/x-www-form-urlencoded，limit:'20mb'用于设置请求的大小
//解决nodejsError:requestentitytoolarge问题
app.use(bodyParser.urlencoded({limit:'20mb',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;
varbase64Data=imgData.replace(/^data:image\/\w+;base64,/,"");
vardataBuffer=newBuffer(base64Data,'base64');
fs.writeFile("image.png",dataBuffer,function(err){
if(err){
res.send(err);
}else{
res.send("保存成功！");
}
});
})
varserver=app.listen(4444,function(){
console.log('监听端口4444');
});
angular2前台代码
//上传图片
/*
*letdata={
*size:'125422',
*type:'image/jpeg',
*name:'test.jpg',
*url:base64
*};
*获取图片的base64码可以通过FileReader获取
*/
uploadImage(data){
returnnewPromise((resolve,reject)=>{
letheaders=newHeaders({
'Content-Type':'application/x-www-form-urlencoded'
});
letoptions=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参数序列化
privatetoQueryString(obj){
letresult=[];
for(letkeyinobj){
key=encodeURIComponent(key);
letvalues=obj[key];
if(values&&values.constructor==Array){
letqueryValues=[];
for(leti=0,len=values.length,value;i
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。