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分页类代码分享
Jun 17 NodeJs
nodejs npm package.json中文文档
Sep 04 NodeJs
详谈nodejs异步编程
Dec 04 NodeJs
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
Jul 26 NodeJs
nodeJS删除文件方法示例
Dec 25 NodeJs
详解NodeJs支付宝移动支付签名及验签
Jan 06 NodeJs
nodejs读写json文件的简单方法(必看)
Mar 09 NodeJs
nodejs入门教程五:连接数据库的方法分析
Apr 24 NodeJs
Nodejs进阶:express+session实现简易登录身份认证
Apr 24 NodeJs
nodejs实现解析xml字符串为对象的方法示例
Mar 14 NodeJs
基于nodejs res.end和res.send的区别
May 14 NodeJs
Node.js实现爬取网站图片的示例代码
Apr 04 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实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
开始着手第一个Django项目
2015/07/15 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Android分包MultiDex策略详解
2017/10/30 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python 自定义装饰器实例详解
2019/07/20 Python
python 异步async库的使用说明
2020/05/04 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
小松树教学反思
2014/02/11 职场文书
黄石寨导游词
2015/02/05 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
千手观音观后感
2015/06/03 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python