nodeJs與elementUI實現(xiàn)上傳圖片

前端使用的是elementUI里面的upload封裝好的組件

1.引入multer 和 fs(沒有則需要npm下載)

var multer=require('multer');
var fs=require('fs');

2.創(chuàng)建storage,storage提供了訪問特定于域名下的會話存儲或本地存儲的功能炒刁,例如可以添加铃彰、修改或刪除存儲的數(shù)據(jù)項族阅。

如果你想要操作一個域名的會話存儲局劲,可以使用Window.sessionStroage,如果想要操作一個域名的本地存儲陕贮,可以使用window.localstroage

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 接收到文件后輸出的保存路徑(若不存在則需要創(chuàng)建)
        cb(null, 'upload/');
    },
    filename: function (req, file, cb) {
        // 將保存文件名設(shè)置為 時間戳 + 文件原始名票摇,比如 151342376785-123.jpg
        cb(null, Date.now() + "-" + file.originalname);
    }
});

3.創(chuàng)建文件夾

var createFolder = function (folder) {
    try {
        // 測試 path 指定的文件或目錄的用戶權(quán)限,我們用來檢測文件是否存在
        // 如果文件路徑不存在將會拋出錯誤"no such file or directory"
        fs.accessSync(folder);
    } catch (e) {
        // 文件夾不存在昌执,以同步的方式創(chuàng)建文件目錄萄窜。
        fs.mkdirSync(folder);
    }
};

4.創(chuàng)建上傳文件路徑

var uploadFolder = './upload/';
  createFolder(uploadFolder);

5.創(chuàng)建 multer 對象

var upload = multer({ storage: storage });

6.為前端提供上傳接口

router.post('/upload', upload.single('file'), function (req, res, next) {
    var file = req.file;
    console.log('文件類型:%s', file.mimetype);
    console.log('原始文件名:%s', file.originalname);
    console.log('文件大小:%s', file.size);
    console.log('文件保存路徑:%s', file.path);
    // 接收文件成功后返回數(shù)據(jù)給前端
    res.json({ res_code: '0', name: file.originalname, url: file.path });
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末循榆,一起剝皮案震驚了整個濱河市析恢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌秧饮,老刑警劉巖映挂,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泽篮,死亡現(xiàn)場離奇詭異,居然都是意外死亡柑船,警方通過查閱死者的電腦和手機帽撑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鞍时,“玉大人亏拉,你說我怎么就攤上這事∧嫖。” “怎么了及塘?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長锐极。 經(jīng)常有香客問我笙僚,道長,這世上最難降的妖魔是什么灵再? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任肋层,我火速辦了婚禮,結(jié)果婚禮上檬嘀,老公的妹妹穿的比我還像新娘槽驶。我一直安慰自己,他們只是感情好鸳兽,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布掂铐。 她就那樣靜靜地躺著,像睡著了一般揍异。 火紅的嫁衣襯著肌膚如雪全陨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天衷掷,我揣著相機與錄音辱姨,去河邊找鬼。 笑死戚嗅,一個胖子當(dāng)著我的面吹牛雨涛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播懦胞,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼替久,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了躏尉?” 一聲冷哼從身側(cè)響起蚯根,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎胀糜,沒想到半個月后颅拦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蒂誉,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年距帅,在試婚紗的時候發(fā)現(xiàn)自己被綠了右锨。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡锥债,死狀恐怖陡蝇,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情哮肚,我是刑警寧澤,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布广匙,位于F島的核電站允趟,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏鸦致。R本人自食惡果不足惜潮剪,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望分唾。 院中可真熱鬧抗碰,春花似錦、人聲如沸绽乔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽折砸。三九已至看疗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間睦授,已是汗流浹背两芳。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留去枷,地道東北人怖辆。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像删顶,于是被迫代替她去往敵國和親竖螃。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 點擊查看原文 Web SDK 開發(fā)手冊 SDK 概述 網(wǎng)易云信 SDK 為 Web 應(yīng)用提供一個完善的 IM 系統(tǒng)...
    layjoy閱讀 13,758評論 0 15
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5翼闹? 答:HTML5是最新的HTML標(biāo)準(zhǔn)斑鼻。 注意:講述HT...
    kismetajun閱讀 27,476評論 1 45
  • 本文旨在加深對前端知識點的理解,資料來源于網(wǎng)絡(luò)猎荠,由本人(博客:http://segmentfault.com/u/...
    AuthorJim閱讀 437評論 0 0
  • 前端面試題的簡單整理坚弱,都只是大概回答蜀备,具體某些問題的具體理解后續(xù)會補上。 前端頁面有哪三層構(gòu)成荒叶,分別是什么?作用是...
    李歡li閱讀 483評論 0 2
  • 雨 率性而執(zhí)著 貼在臉上 扎進頭發(fā) 歡快活潑 行走在雨中 感受雨 融進雨 讓心在雨里奔跑 塵埃和浮躁紛紛落下 不牽...
    流浪貓70s閱讀 279評論 1 8