欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

angular2+nodejs实现图片上传功能

程序员文章站 2022-07-05 21:14:15
在使用angular2进行图片上传的时候,遇到了各种各样的问题。在多番尝试之后最终成功上传图片,下面将我的方法分享给大家: nodejs 后台代码 var ex...

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

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