angular2+nodejs实现图片上传功能

 更新时间:2017年03月27日 15:55:57   作者:花开花又谢  
这篇文章主要介绍了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));
  } 

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码

    AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码

    本篇文章主要介绍了AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码,具有一定的参考价值,有兴趣的可以了解一下。
    2016-12-12
  • angular *Ngif else用法详解

    angular *Ngif else用法详解

    这篇文章主要介绍了angular *Ngif else用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • AngularJS身份验证的方法

    AngularJS身份验证的方法

    在客户端使用AngularJS做身份验证的话,推荐使用service来做,下面脚本之家小编给大家介绍AngularJS身份验证的方法,感兴趣的朋友一起学习吧
    2016-02-02
  • Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法

    Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法

    今天小编就为大家分享一篇Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • angular4+百分比进度显示插件用法示例

    angular4+百分比进度显示插件用法示例

    这篇文章主要介绍了angular4+百分比进度显示插件用法,结合实例形式分析了Angular4安装及使用百分比进度显示插件相关步骤与操作技巧,需要的朋友可以参考下
    2019-05-05
  • 详解AngularJS controller调用factory

    详解AngularJS controller调用factory

    本篇文章主要介绍了详解AngularJS controller调用factory,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

    在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

    在AngularJs中有三种方式可以设置请求头信息,文中对每种方法给大家介绍的非常详细,选择那种方式可以根据自己的需求,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-09-09
  • 使用ionic播放轮询广告的实现方法(必看)

    使用ionic播放轮询广告的实现方法(必看)

    下面小编就为大家带来一篇使用ionic播放轮询广告的实现方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS表单基本操作

    AngularJS表单基本操作

    这篇文章主要为大家详细介绍了AngularJS表单基本操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • angular.bind使用心得

    angular.bind使用心得

    这篇文章主要介绍了angular.bind使用心得,以及个人对于angular.bind的理解,这里分享给大家,希望大家能够喜欢。
    2015-10-10

最新评论