国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

angular2+nodejs實現圖片上傳功能

2019-11-19 17:00:46
字體:
來源:轉載
供稿:網友

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

 以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 巴彦淖尔市| 锡林郭勒盟| 景泰县| 上饶县| 通州区| 蓬莱市| 锡林浩特市| 偃师市| 塔河县| 吴堡县| 务川| 铜山县| 信丰县| 大庆市| 扎鲁特旗| 黄平县| 西乡县| 南木林县| 措勤县| 衡东县| 塔城市| 永福县| 武宁县| 鄂托克前旗| 莱西市| 万源市| 郯城县| 鄂托克前旗| 达日县| 安泽县| 宜都市| 鄂州市| 辉南县| 体育| 尼玛县| 台州市| 民丰县| 临城县| 磐安县| 孝感市| 孝感市|