angular2+nodejs实现图片上传功能


Posted in NodeJs onMarch 27, 2017

在使用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));
  }

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

NodeJs 相关文章推荐
Nodejs+express+html5 实现拖拽上传
Aug 08 NodeJs
轻松创建nodejs服务器(10):处理上传图片
Dec 18 NodeJs
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
Jan 01 NodeJs
NodeJS学习笔记之(Url,QueryString,Path)模块
Jan 13 NodeJs
Nodejs的express使用教程
Nov 23 NodeJs
浅析Nodejs npm常用命令
Jun 14 NodeJs
nodejs个人博客开发第二步 入口文件
Apr 12 NodeJs
详解nodejs模板引擎制作
Jun 14 NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 NodeJs
nodejs实现范围请求的实现代码
Oct 12 NodeJs
详解从NodeJS搭建中间层再谈前后端分离
Nov 13 NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 NodeJs
深入nodejs中流(stream)的理解
Mar 27 #NodeJs
nodejs学习笔记之路由
Mar 27 #NodeJs
NodeJS处理Express中异步错误
Mar 26 #NodeJs
简单好用的nodejs 爬虫框架分享
Mar 26 #NodeJs
nodejs开发——express路由与中间件
Mar 24 #NodeJs
详解NodeJS框架express的路径映射(路由)功能及控制
Mar 24 #NodeJs
NodeJS学习笔记之Module的简介
Mar 24 #NodeJs
You might like
数字转英文
2006/12/06 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
js三种排序算法分享
2012/08/16 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
Python读写文件方法总结
2015/06/09 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
python中threading开启关闭线程操作
2020/05/02 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
初中生物教学反思
2016/02/20 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书