【node】檔案上傳功能簡易實現

楊成功發表於2019-02-16

找了不少檔案上傳的相關模組，最後選擇了比較常用，並且是express推薦使用的 multer 來實現檔案上傳，附上 GitHub 地址

1. 開始

開始第一步，自然就是安裝模組，不多說

npm install multer --save

這裡簡單說一下，因為檔案上傳是用 post 方法提交資料，所以上傳的單檔案或者多檔案會作為一個 body 體新增到請求物件中，我們可以通過 req.file 或者 req.files 檢視上傳後檔案的相關資訊。

以單檔案上傳為例，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 值根據配置生成，用於實現相關邏輯

2. 實現

實現分兩部分，前端和後端

前端

前端就是普通的寫法，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方法相當於建立一個磁碟儲存引擎，配置檔案上傳路徑，檔名等，可控性更高。

destination    # 設定檔案上傳路徑
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表示接收最大數量

fname 是前端 <input type=”file” name=”fname”> 的 name 值

基本的上傳檔案方法就這些了，當然還有很多的配置引數之類的設定，要參考 GitHub 說明，地址在開頭，需要者自行查閱

本文由 楊成功 原創，更多原創內容請到專欄 楊成功的全棧之路

相關文章