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(三)--- Node.js模块
May 25 NodeJs
nodejs学习笔记之路由
Mar 27 NodeJs
nodejs服务搭建教程 nodejs访问本地站点文件
Apr 07 NodeJs
nodeJS实现简单网页爬虫功能的实例(分享)
Jun 08 NodeJs
NodeJs中express框架的send()方法简介
Jun 20 NodeJs
使用npm安装最新版本nodejs
Jan 18 NodeJs
nodejs实现的连接MySQL数据库功能示例
Jan 25 NodeJs
nodejs实现连接mongodb数据库的方法示例
Mar 15 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
nodejs中方法和模块用法示例
Dec 24 NodeJs
通过Nodejs搭建网站简单实现注册登录流程
Jun 14 NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 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中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
Vue中props的详解
2019/05/16 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
签约仪式主持词
2014/03/19 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
单位接收证明格式
2015/06/18 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
Python列表的索引与切片
2022/04/07 Python
Java死锁的排查
2022/05/11 Java/Android