您好,登錄后才能下訂單哦!
這期內容當中小編將會給大家?guī)碛嘘PNodejs中怎么利用express和multer實現文件上傳,文章內容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
非常簡單,一行命令。
npm install express multer multer --save
每個示例下面,都有下面兩個文件
? upload-custom-filename git:(master) ? tree -L 1 . ├── app.js # 服務端代碼,用來處理文件上傳請求 ├── form.html # 前端頁面,用來上傳文件
基礎例子:單圖上傳
app.js。
var fs = require('fs'); var express = require('express'); var multer = require('multer') var app = express(); var upload = multer({ dest: 'upload/' }); // 單圖上傳 app.post('/upload', upload.single('logo'), function(req, res, next){ res.send({ret_code: '0'}); }); app.get('/form', function(req, res, next){ var form = fs.readFileSync('./form.html', {encoding: 'utf8'}); res.send(form); }); app.listen(3000);
form.html。
<form action="/upload-single" method="post" enctype="multipart/form-data"> <h3>單圖上傳</h3> <input type="file" name="logo"> <input type="submit" value="提交"> </form>
運行服務。
node app.js
訪問 http://127.0.0.1:3000/form ,選擇圖片,點擊“提交”,done。然后,你就會看到 upload 目錄下多了個圖片。
基礎例子:多圖上傳
代碼簡直不能更簡單,將前面的 upload.single('logo') 改成 upload.array('logo', 2) 就行。表示:同時支持2張圖片上傳,并且 name 屬性為 logo。
app.js。
var fs = require('fs'); var express = require('express'); var multer = require('multer') var app = express(); var upload = multer({ dest: 'upload/' }); // 多圖上傳 app.post('/upload', upload.array('logo', 2), function(req, res, next){ res.send({ret_code: '0'}); }); app.get('/form', function(req, res, next){ var form = fs.readFileSync('./form.html', {encoding: 'utf8'}); res.send(form); }); app.listen(3000);
form.html。
<form action="/upload-multi" method="post" enctype="multipart/form-data"> <h3>多圖上傳</h3> <input type="file" name="logos"> <input type="file" name="logos"> <input type="submit" value="提交"> </form>
同樣的測試步驟,不贅述。
獲取上傳的圖片的信息
很多時候,除了將圖片保存在服務器外,我們還需要做很多其他事情,比如將圖片的信息存到數據庫里。
常用的信息比如原始文件名、文件類型、文件大小、本地保存路徑等。借助multer,我們可以很方便的獲取這些信息。
還是單文件上傳的例子,此時,multer會將文件的信息寫到 req.file 上,如下代碼所示。
app.js。
var fs = require('fs'); var express = require('express'); var multer = require('multer') var app = express(); var upload = multer({ dest: 'upload/' }); // 單圖上傳 app.post('/upload', upload.single('logo'), 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); res.send({ret_code: '0'}); }); app.get('/form', function(req, res, next){ var form = fs.readFileSync('./form.html', {encoding: 'utf8'}); res.send(form); }); app.listen(3000);
form.html。
<form action="/upload" method="post" enctype="multipart/form-data"> <h3>單圖上傳</h3> <input type="file" name="logo"> <input type="submit" value="提交"> </form>
啟動服務,上傳文件后,就會看到控制臺下打印出的信息。
文件類型:image/png 原始文件名:1.png 文件大?。?8379 文件保存路徑:upload/b7e4bb22375695d92689e45b551873d9
自定義文件上傳路徑、名稱
有的時候,我們想要定制文件上傳的路徑、名稱,multer也可以方便的實現。
自定義本地保存的路徑
非常簡單,比如我們想將文件上傳到 my-upload 目錄下,修改下 dest 配置項就行。
var upload = multer({ dest: 'upload/' });
在上面的配置下,所有資源都是保存在同個目錄下。有時我們需要針對不同文件進行個性化設置,那么,可以參考下一小節(jié)的內容。
自定義本地保存的文件名
代碼稍微長一點,單同樣簡單。multer 提供了 storage 這個參數來對資源保存的路徑、文件名進行個性化設置。
使用注意事項如下:
destination:設置資源的保存路徑。注意,如果沒有這個配置項,默認會保存在 /tmp/uploads 下。此外,路徑需要自己創(chuàng)建。
filename:設置資源保存在本地的文件名。
app.js。
var fs = require('fs'); var express = require('express'); var multer = require('multer') var app = express(); var createFolder = function(folder){ try{ fs.accessSync(folder); }catch(e){ fs.mkdirSync(folder); } }; var uploadFolder = './upload/'; createFolder(uploadFolder); // 通過 filename 屬性定制 var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, uploadFolder); // 保存的路徑,備注:需要自己創(chuàng)建 }, filename: function (req, file, cb) { // 將保存文件名設置為 字段名 + 時間戳,比如 logo-1478521468943 cb(null, file.fieldname + '-' + Date.now()); } }); // 通過 storage 選項來對 上傳行為 進行定制化 var upload = multer({ storage: storage }) // 單圖上傳 app.post('/upload', upload.single('logo'), function(req, res, next){ var file = req.file; res.send({ret_code: '0'}); }); app.get('/form', function(req, res, next){ var form = fs.readFileSync('./form.html', {encoding: 'utf8'}); res.send(form); }); app.listen(3000);
form.html。
<form action="/upload" method="post" enctype="multipart/form-data"> <h3>單圖上傳</h3> <input type="file" name="logo"> <input type="submit" value="提交"> </form>
上述就是小編為大家分享的Nodejs中怎么利用express和multer實現文件上傳了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。