angular2+nodejs實現圖片上傳功能
更新時間:2017年03月27日 15:55:57 作者:花開花又謝
這篇文章主要介紹了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('監(jiān)聽端口 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));
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
AngularJs篇:使用AngularJs打造一個簡易權限系統的實現代碼
本篇文章主要介紹了AngularJs篇:使用AngularJs打造一個簡易權限系統的實現代碼,具有一定的參考價值,有興趣的可以了解一下。2016-12-12
Angularjs Ng_repeat中實現復選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實現復選框選中并顯示不同的樣式方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解AngularJS controller調用factory
本篇文章主要介紹了詳解AngularJS controller調用factory,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
在AngularJs中設置請求頭信息(headers)的方法及不同方法的比較
在AngularJs中有三種方式可以設置請求頭信息,文中對每種方法給大家介紹的非常詳細,選擇那種方式可以根據自己的需求,感興趣的朋友跟隨腳本之家小編一起看看吧2018-09-09

