angular2+nodejs如何實現圖片上傳功能

這篇文章主要介紹angular2+nodejs如何實現圖片上傳功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

以上是“angular2+nodejs如何實現圖片上傳功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！