node文件上傳功能簡易實現(xiàn)代碼
找了不少文件上傳的相關(guān)模塊,最后選擇了比較常用,并且是express推薦使用的 multer 來實現(xiàn)文件上傳,附上 GitHub 地址
1. 開始
開始第一步,自然就是安裝模塊,不多說
npm install multer --save
這里簡單說一下,因為文件上傳是用 post 方法提交數(shù)據(jù),所以上傳的單文件或者多文件會作為一個 body 體添加到請求對象中,我們可以通過 req.file 或者 req.files 查看上傳后文件的相關(guān)信息。
以單文件上傳為例,req.file 返回一個對象:
{ "fieldname":"avatar", #前端上傳文件input的name "originalname":"Wx.php", #本地文件名 "encoding":"7bit", #文件編碼類型 "mimetype":"text/php", #文件類型 "destination":"uploads/", #上傳根目錄 "filename":"1497286037422Wx.php", #上傳后文件名 "path":"uploads/1497286037422Wx.php", #文件路徑 "size":18174 #文件大小 }
該對象的 key 值是固定的,velue 值根據(jù)配置生成,用于實現(xiàn)相關(guān)邏輯
2. 實現(xiàn)
實現(xiàn)分兩部分,前端和后端
前端
前端就是普通的寫法,form 表單提交
<form action="/test/upload" method="post" enctype="multipart/form-data"> <input type="file" name="avatar"> <input type="submit" name="提交"> </form>
切記,enctype="multipart/form-data" 這個屬性一定要加上,否則后臺接收不到文件。
后端
首先我們新建配置文件,upload.js
// upload.js var multer = require('multer'); # 引入模塊 var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { cb(null, Date.now()+file.originalname) } }) var upload = multer({ storage: storage }) module.exports = upload;
diskStorage
方法相當于創(chuàng)建一個磁盤存儲引擎,配置文件上傳路徑,文件名等,可控性更高。
destination # 設(shè)置文件上傳路徑 filename # 重命名文件
然后新建路由接收文件,file.js
// file.js var express = require('express'); var router = express.Router(); // 引入配置文件 var upload = require('../config/upload'); router.post('/upload', upload.single('avatar'), function(req, res, next) { res.send(req.file); }); module.exports = router;
file.js 中 upload.single() 方法表示接受單文件,常用的有
upload.single(fname); // 接收單文件 upload.array(fname[, maxCount]) //接收多文件,maxCount表示接收最大數(shù)量
fname 是前端 <input type="file" name="fname"> 的 name 值
基本的上傳文件方法就這些了,當然還有很多的配置參數(shù)之類的設(shè)置,要參考 GitHub 說明,地址在開頭,需要者自行查閱
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Node.JS在命令行中檢查Chrome瀏覽器是否安裝并打開指定網(wǎng)址
這篇文章主要介紹了Node.JS在命令行中檢查Chrome瀏覽器是否安裝,并打開指定網(wǎng)址,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05Node環(huán)境中JS代碼缺少window對象的原因和解決方案
你可能會在某些情況下需要在Node環(huán)境下運行JavaScript代碼,但你也可能會遇到一個常見的問題:缺少window環(huán)境,在本文中,我們將深入探討這個問題的原因,并提供解決方案,需要的朋友可以參考下2023-08-08nodejs結(jié)合Socket.IO實現(xiàn)的即時通訊功能詳解
這篇文章主要介紹了nodejs結(jié)合Socket.IO實現(xiàn)的即時通訊功能,結(jié)合實例形式詳細分析了nodejs結(jié)合Socket.IO實現(xiàn)即時通訊的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-01-01nodeJS實現(xiàn)簡單網(wǎng)頁爬蟲功能的實例(分享)
下面小編就為大家?guī)硪黄猲odeJS實現(xiàn)簡單網(wǎng)頁爬蟲功能的實例(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06實例詳解Nodejs 保存 payload 發(fā)送過來的文件
這篇文章主要介紹了實例詳解Nodejs 保存 payload 發(fā)送過來的文件 的相關(guān)資料,需要的朋友可以參考下2016-01-01Nodejs中讀取中文文件編碼問題、發(fā)送郵件和定時任務(wù)實例
這篇文章主要介紹了Nodejs中讀取中文文件編碼問題、發(fā)送郵件和定時任務(wù)實例,本文使用了3個模塊來解決這3個需求,并給出了代碼操作實例,需要的朋友可以參考下2015-01-01node連接mysql查詢事務(wù)處理的實現(xiàn)
本文主要介紹了node連接mysql查詢事務(wù)處理的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11