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事件的监听与触发的理解分析
Feb 12 NodeJs
详解nodejs微信公众号开发——2.自动回复
Apr 10 NodeJs
使用nodejs爬取前程无忧前端技能排行
May 06 NodeJs
基于nodejs 的多页面爬虫实例代码
May 31 NodeJs
nodejs mysql 实现分页的方法
Jun 06 NodeJs
nodejs中art-template模板语法的引入及冲突解决方案
Nov 07 NodeJs
nodejs多版本管理总结
Apr 03 NodeJs
Nodejs 和 Electron ubuntu下快速安装过程
May 04 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
Dec 12 NodeJs
nodejs语言实现验证码生成功能的示例代码
Oct 13 NodeJs
nodejs环境使用Typeorm连接查询Oracle数据
Dec 05 NodeJs
Nodejs 微信小程序消息推送的实现
Jan 20 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
PHP中HTML标签过滤技巧
2014/01/07 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP中cookie知识点学习
2018/05/06 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
Display SQL Server Version Information
2007/06/21 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
js数组的操作详解
2013/03/27 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
Node 代理访问的实现
2019/09/19 Javascript
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
工艺工程师岗位职责
2014/03/04 职场文书
销售活动策划方案
2014/08/26 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
Python django中如何使用restful框架
2021/06/23 Python
Java实现房屋出租系统详解
2021/10/05 Java/Android
全新239军机修复记
2022/04/05 无线电
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript