一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

angular2+nodejs实现图片上传功能

时间:2017-08-01 编辑:简简单单 来源:一聚教程网

在使用angular2进行图片上传的时候,遇到了各种各样的问题。在多番尝试之后最终成功上传图片,下面将我的方法分享给大家:

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;

  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前台代码

 

 代码如下复制代码

//上传图片

 /*

 *   let data = {

 *    size: �',

 *    type: 'image/jpeg',

 *    name: 'test.jpg',

 *    url: base64

 *   };

 *获取图片的base64码可以通过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));

  }

 

热门栏目