亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

angular2+nodejs實(shí)現(xiàn)圖片上傳功能

 更新時(shí)間:2017年03月27日 15:55:57   作者:花開(kāi)花又謝  
這篇文章主要介紹了angular2+nodejs實(shí)現(xiàn)圖片上傳功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

在使用angular2進(jìn)行圖片上傳的時(shí)候,遇到了各種各樣的問(wèn)題。在多番嘗試之后最終成功上傳圖片,下面將我的方法分享給大家:

nodejs 后臺(tái)代碼

var express = require("express");
//網(wǎng)絡(luò)請(qǐng)求模塊
var request = require("request");
//引入nodejs文件系統(tǒng)模塊
const fs = require('fs');
//引入body-parser
//包含在請(qǐng)求正文中提交的鍵/值對(duì)數(shù)據(jù)。 
//默認(rèn)情況下,它是未定義的,并在使用body-parser中間件時(shí)填充。
var bodyParser = require('body-parser');
var app = express();
//解析 application/x-www-form-urlencoded,limit:'20mb'用于設(shè)置請(qǐng)求的大小
//解決nodejs Error: request entity too large問(wèn)題
app.use(bodyParser.urlencoded({ limit:'20mb',extended: true })); 
//設(shè)置跨域訪問(wèn)
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('監(jiān)聽(tīng)端口 4444');
});

angular2前臺(tái)代碼

 //上傳圖片
 /*
 *   let data = {
 *    size: '125422',
 *    type: 'image/jpeg',
 *    name: 'test.jpg',
 *    url: base64
 *   };
 *獲取圖片的base64碼可以通過(guò)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參數(shù)序列化
  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));
  } 

 以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解AngularJS2 Http服務(wù)

    詳解AngularJS2 Http服務(wù)

    本篇文章主要介紹了詳解AngularJS2 Http服務(wù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • 關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié)

    關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié)

    這篇文章主要介紹了關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-04-04
  • Angularjs中UI Router全攻略

    Angularjs中UI Router全攻略

    這篇文章主要介紹了Angularjs中UI Router全攻略,涉及到angularjs ui router的基本用法,需要的朋友參考下吧
    2016-01-01
  • 詳解AngularJS中的表達(dá)式使用

    詳解AngularJS中的表達(dá)式使用

    這篇文章主要介紹了詳解AngularJS中的表達(dá)式使用,包括處理數(shù)字和字符串等各種對(duì)象的操作,需要的朋友可以參考下
    2015-06-06
  • Angular下H5上傳圖片的方法(可多張上傳)

    Angular下H5上傳圖片的方法(可多張上傳)

    本文給大家分享在使用angular上傳圖片的功能,在開(kāi)發(fā)過(guò)程中遇到很多問(wèn)題,最終都解決了,今天小編給大家介紹下Angular下H5上傳圖片的方法(可多張上傳),非常不錯(cuò),需要的朋友參考下
    2017-01-01
  • angularjs性能優(yōu)化的方法

    angularjs性能優(yōu)化的方法

    這篇文章主要介紹了angularjs性能優(yōu)化的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Angular和百度地圖的結(jié)合實(shí)例代碼

    Angular和百度地圖的結(jié)合實(shí)例代碼

    最近在angular的項(xiàng)目,但是我用直接引用百度地圖的方法引進(jìn)js,寫(xiě)html,js代碼,發(fā)現(xiàn)報(bào)錯(cuò),接下來(lái)通過(guò)本文給大家介紹angular和百度地圖的結(jié)合,需要的朋友可以參考下
    2016-10-10
  • @angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法

    @angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法

    這篇文章主要介紹了@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12
  • AngularJS基礎(chǔ) ng-hide 指令用法及示例代碼

    AngularJS基礎(chǔ) ng-hide 指令用法及示例代碼

    本文主要介紹AngularJS ng-hide 指令,這里整理了ng-hide指令的基礎(chǔ)資料,并附實(shí)例代碼,有興趣的小伙伴參考下
    2016-08-08
  • 詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務(wù)

    詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務(wù)

    這篇文章給大家詳細(xì)介紹了AngularJs提供的嚴(yán)格上下文轉(zhuǎn)義服務(wù)$sce與$sceDelegate,文中介紹的很詳細(xì),有需要的朋友們可以參考借鑒。
    2016-09-09

最新評(píng)論