angular2+nodejs实现图片上传

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

nodejs 后台代码

var express = require("express");
//网络请求模块
var request = require("request");
//引入nodejs文件系统模块
const fs = require('fs');
//引入body-parser
//包含在请求正文中提交的键/值对数据。 
//默认情况下,它是未定义的,并在使用body-parser中间件时填充。
var bodyParser = require('body-parser');
var app = express();
//解析 application/x-www-form-urlencoded,limit:'20mb'用于设置请求的大小
//解决nodejs Error: request entity too large问题
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){
    var imgData = req.body.url;
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(base64Data, 'base64');
    fs.writeFile("image.png", dataBuffer, function(err) {
        if(err){
            res.send(err);
        }else{
            res.send("保存成功!");
        }
    });
})

var server = app.listen(4444, function() {
    console.log('监听端口 4444');
});

angular2前台代码

 //上传图片
 /*
 *      let data = {
 *       size: '125422',
 *       type: 'image/jpeg',
 *       name: 'test.jpg',
 *       url: base64
 *     };
 *获取图片的base64码可以通过FileReader获取
 */
 
  uploadImage(data) {
    return new Promise((resolve, reject) => {
      let headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
      });
      let options = new RequestOptions({
        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 key in obj) {
       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));
       }
    }
     return result.join('&');
   }
   private toQueryPair(key, value) {
     if (typeof value == 'undefined') {
       return key;
     }
     return key + '=' + encodeURIComponent(value === null ? '' : String(value));
   }    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,738评论 25 709
  • 【一阶段·片段二】 R·阅读原文片段 《商业模式新生代》 1 请写下你的目标 例一:我的目标是在工作表现中领先。 ...
    小小小影子阅读 1,638评论 2 0
  • 多愁善感的时候总是想写点东西,总觉得只有孤独才可以成就人,一个人的时候也可以撑起一切。本就是个三分钟热度的人,望能坚持。
    芭蕉叶落阅读 1,170评论 0 0
  • 夜的静谧,静谧的灵气 岸边遥远的都市 每一粒灯光是故事 谜一样的故事 人间是海市蜃楼 浪声,暗香,通感,默契 时间...
    willboom阅读 1,326评论 0 2
  • 世界上最快而又最慢,最长而又最短,最平凡而又最珍贵,最容易被人忽视,而又最令人 后悔的就是时间。 --高尔基 前一...
    逻辑世界里的疯子阅读 2,118评论 0 0