基於express+multer的檔案上傳
關於作者
程式猿小卡,前騰訊IMWEB團隊成員,阿里雲棲社群專家博主。歡迎加入 Express前端交流群(197339705)。
概覽
圖片上傳是web開發中經常用到的功能,node社群在這方面也有了相對完善的支援。
常用的開源元件有multer、formidable等,藉助這兩個開源元件,可以輕鬆搞定圖片上傳。
本文主要講解以下內容,後續章節會對技術實現細節進行深入挖掘。本文所有例子均有程式碼示例,可在這裡檢視。
- 基礎例子:藉助express、multer實現單圖、多圖上傳。
- 常用API:獲取上傳的圖片的資訊。
- 進階使用:自定義儲存的圖片路徑、名稱。
環境初始化
非常簡單,一行命令。
npm install express multer multer --save
每個示例下面,都有下面兩個檔案
➜ upload-custom-filename git:(master) ✗ tree -L 1
.
├── app.js # 服務端程式碼,用來處理檔案上傳請求
├── form.html # 前端頁面,用來上傳檔案
基礎例子:單圖上傳
完整示例程式碼請參考這裡。
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);
< formaction="/upload-single"method="post"enctype="multipart/form-data">
<h2>單圖上傳</h2>
<inputtype="file"name="logo">
<inputtype="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。
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);
<formaction="/upload-multi"method="post"enctype="multipart/form-data">
<h2>多圖上傳</h2>
<inputtype="file"name="logo">
<inputtype="file"name="logo">
<inputtype="submit"value="提交">
</form>
同樣的測試步驟,不贅述。
獲取上傳的圖片的資訊
完整示例程式碼請參考這裡。
很多時候,除了將圖片儲存在伺服器外,我們還需要做很多其他事情,比如將圖片的資訊存到資料庫裡。
常用的資訊比如原始檔名、檔案型別、檔案大小、本地儲存路徑等。藉助multer,我們可以很方便的獲取這些資訊。
還是單檔案上傳的例子,此時,multer會將檔案的資訊寫到 req.file 上,如下程式碼所示。
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);
<formaction="/upload"method="post"enctype="multipart/form-data">
<h2>單圖上傳</h2>
<inputtype="file"name="logo">
<inputtype="submit"value="提交">
</form>
啟動服務,上傳檔案後,就會看到控制檯下打印出的資訊。
檔案型別:image/png
原始檔名:1.png
檔案大小:18379
檔案儲存路徑:upload/b7e4bb22375695d92689e45b551873d9
自定義檔案上傳路徑、名稱
有的時候,我們想要定製檔案上傳的路徑、名稱,multer也可以方便的實現。
自定義本地儲存的路徑
非常簡單,比如我們想將檔案上傳到 my-upload 目錄下,修改下 dest 配置項就行。
var upload = multer({ dest: 'upload/' });
在上面的配置下,所有資源都是儲存在同個目錄下。有時我們需要針對不同檔案進行個性化設定,那麼,可以參考下一小節的內容。
自定義本地儲存的檔名
完整示例程式碼請參考這裡。
程式碼稍微長一點,單同樣簡單。multer 提供了 storage 這個引數來對資源儲存的路徑、檔名進行個性化設定。
使用注意事項如下:
- destination:設定資源的儲存路徑。注意,如果沒有這個配置項,預設會儲存在 /tmp/uploads 下。此外,路徑需要自己建立。
- filename:設定資源儲存在本地的檔名。
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); // 儲存的路徑,備註:需要自己建立
},
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);
<formaction="/upload"method="post"enctype="multipart/form-data">
<h2>單圖上傳</h2>
<inputtype="file"name="logo">
<inputtype="submit"value="提交">
</form>
測試步驟不贅述,訪問一下就知道效果了。
寫在後面
本文對multer的基礎用法進行了介紹,並未涉及過多原理性的東西。俗話說 授人以漁不如授人以漁,在後續的章節裡,會對檔案上傳的細節進行挖掘,好讓讀者朋友對檔案上傳加深進一步的認識。
相關連結
轉載:https://www.cnblogs.com/chyingp/p/express-multer-file-upload.html
相關推薦
基於TCP伺服器檔案上傳與下載
** ## service.c ** #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/types.h> #include &l
springboot基於MultipartFile實現檔案上傳
MultipartFile是springMVC的jar包,不需要其它座標,可以直接使用 一. 新建controller @RequestMapping("/uploadTest1") public String test1(@RequestParam("
基於html5的檔案上傳案例
html5的formData物件可以向正常的form表單一樣通過ajax請求傳送,包括上傳檔案並且可以一次性上傳多個檔案。並且可以根據監聽事件,監視上傳進度,終止,結束等等。下面的例項程式碼使用到了bootstrap,跑的話先搭建好bootstrap環境。並且要支援html5的瀏覽器。 jsp頁面程式碼 &l
(轉)python 全棧開發,Day75(Django與Ajax,檔案上傳,ajax傳送json資料,基於Ajax的檔案上傳,SweetAlert外掛)
昨日內容回顧 基於物件的跨表查詢 正向查詢:關聯屬性在A表中,所以A物件找關聯B表資料,正向查詢 反向查詢:關聯屬性在A表中,所以B物件找A物件,反向查詢 一對多: 按欄位:xx book --
基於AJAX的檔案上傳顯示進度條實現
基於Ajax的檔案上傳要實現的功能要求,要在使用者提交了上傳按鈕請求後,客戶端其頁面要顯示檔案上傳進度條。 其整個功能時序圖如圖所示。 簡單的說,要實現在客戶端顯示進度條,需要做的是:當客戶端提交上傳檔案請求後,伺服器在上傳檔案
基於WebUploader的檔案上傳外掛
首先把地址甩出來,http://fex-team.github.io/webuploader/ 裡面有比較完整的demo案例文件,本文主要是基於檔案上傳和圖片上傳增加了大量的註釋,基本保證了每行程式碼都有註釋以助於理解,是對官網demo的增強版,希望可以幫助大家更好的理解該
利用HTML5+的Uploader模組API實現基於MUI的檔案上傳
最近由於公司專案的需要,使用HBuilder開發基於MUI的web版APP,其中有一個檔案上傳的功能,通過查詢資料,發現利用HTML5+的Uploader模組的API能上傳檔案。經過一番折騰後,終於成功實現了多檔案的上傳,簡單地記錄一下主要的實現方法,方便以
jQuery.MultiFile 基於jQuery多檔案上傳外掛
jQuery.MultiFile是基於jQuery的簡單(容量也很小)的外掛,可幫助使用者很容易的選擇多個檔案進行上傳管理。 下載及使用方法:[url]http://www.fyneworks.com/jquery
基於springMVC的檔案上傳(親自實踐,完美的執行)
由於是一個新手菜鳥,所以說對很多東西都不是很瞭解,最近剛好在做一個專案需要做檔案的上傳和下載,以前直接是用寫好的,這個自己動手寫了一下用了半天時間跟大家分享一下。 一.環境是SSM+Maven 首先,你需要搭建好springMC的環境,如果不會搭建的話
如何基於ServiceComb實現檔案上傳功能
檔案上傳,當前支援在vertx rest通道和servlet rest中使用。 檔案上傳使用標準的http form格式,可與瀏覽器的上傳直接對接。 Producer: 支援jaxrs和springmvc開發模式 jaxrs開發模式: 支援servlet定義的j
基於bootstrap的檔案上傳控制元件-bootstrap-fileinput
github地址:https://github.com/kartik-v/bootstrap-fileinput 官網:http://plugins.krajee.com/file-input 1.
基於springmvc的檔案上傳下載的後臺程式碼
檔案上傳: @RequestMapping("uploadFile") private void uploadFile(@RequestParam("file")MultipartFile uploadfile, HttpServletRequest request
java基於servlet的檔案上傳
研究了一天終於將java上傳檔案看懂了,當然懂的僅僅是皮毛,不妨記下來防止以後忘了。 我們在網上看關於檔案的上傳有很多的介紹,當然有的可以使用有的則不合適:我們首先來看前臺的介面 <!DOCTYPE html> <html lang="en"> &l
基於express+multer的檔案上傳
關於作者 程式猿小卡,前騰訊IMWEB團隊成員,阿里雲棲社群專家博主。歡迎加入 Express前端交流群(197339705)。 概覽 圖片上傳是web開發中經常用到的功能,node社群在這方面也有了相對完善的支援。 常用的開源元件有multer、formid
Nodejs進階:基於express+multer的文件上傳
ora all server and end 文件類型 類型 array body 安裝組件 npm install express multer --save 服務端代碼server.js var Express = re
Express檔案上傳中介軟體Multer
前言: Express預設並不處理HTTP請求體中的資料,對於普通請求體(JSON、二進位制、字串)資料,可以使用body-parser中介軟體。而檔案上傳(multipart/form-data請求),可以基於請求流處理,也可以使用formidable模組或Multer中介軟體。 Mult
案例使用node.js的第三方模組(express和multer)實現檔案上傳
首先,先按照這兩個第三方模組,按照命令:cnpm i express multer --save 第一步:把express伺服器思路先寫好: 1.匯入模組; 2.例項化物件; 3.寫路由; 4.開啟監聽; 程式碼如下: //上傳檔案的使用(express結合multer的使用
Express使用Multer實現檔案上傳
express使用Multer實現檔案上傳 介紹一下如何使用 Express 框架的 Multer 中介軟體實現接收從前端傳過來的檔案並儲存在本地。 目錄: 安裝 Multer 在使用 Multer 之前需要先安裝它:
Servlet3.0學習總結(三)——基於Servlet3.0的檔案上傳
在Servlet2.5中,我們要實現檔案上傳功能時,一般都需要藉助第三方開源元件,例如Apache的commons-fileupload元件,在Servlet3.0中提供了對檔案上傳的原生支援,我們不需要藉助任何第三方上傳元件,直接使用Servlet3.0提供的API就能夠實現檔案上傳功能了。
基於jquery讀取input上傳的檔案內容
<script src="/static/js/jquery.js"></script> // 前端頁面實現頭像預覽 // 當用戶選中檔案之後,也就是頭像的input標籤有值時觸發 $('#avatar').change(function () {