使用Node和MongoDB搭建一個圖床或網(wǎng)盤

猿友 2020-08-13 10:50:59 瀏覽數(shù) (3689)

反饋

1 文章起源

本文給大家分享一個關(guān)于Node+Mongodb的附件上傳下載的項目，這個項目比較簡單，看完的同學就可以很快的搭建一個小網(wǎng)盤或者圖床了。

2 起手式

2.1 概念

首先我們得先去了解一下Mongodb的文件儲存（GridFS）是啥，因為我們都是基于 GridFS 來進行文件儲存

2.2 我們需要什么

了解了大概概念后就可以著手安裝我們必須的插件了

express （這是啥不用我多說）
body-parser （Node解析body的中間件）
ejs （模板引擎，快速開發(fā)就不搞前后端分離了，有興趣的小伙伴可以用Vue/React來搭建小網(wǎng)盤）
gridfs-stream （輕松地與MongoDB GridFS之間傳輸文件。）
method-override (我們用form表單簡單上傳，因為form表單不支持put/delete請求方式，所以把它安排上了，小伙伴可自行使用Ajax，就不需要這么麻煩了)
mongoose (用于連接mongodb必不可少的插件)
multer (Multer是用于處理多部分/表單數(shù)據(jù)的node.js中間件，主要用于上傳文件。它被編寫在busboy之上，以實現(xiàn)最大效率。)
multer-gridfs-storage (Multer的GridFS存儲引擎可將上傳的文件直接存儲到MongoDb。)
nodemon (熱更新)

（推薦教程：Node入門）

以上就是我們需要準備的東西了

npm install express body-parser ejs gridfs-stream method-override mongoose multer multer-gridfs-storage // or yarn add express body-parser ejs gridfs-stream method-override mongoose multer multer-gridfs-storage

2.3 初始化一個項目

// 可自行補充信息 // npm init

然后在根目錄新建一個入口文件app.js,和頁面 views/index.ejs

3 現(xiàn)在項目開始了

3.1 先將基礎(chǔ)部分完事

將我們安裝的包引入，再跑跑看看

const express = require('express') const path = require('path') const crypto = require('crypto') const mongoose = require('mongoose') const multer = require('multer') const GridFsStorage = require('multer-gridfs-storage') const GridFsStream = require('gridfs-stream') const methodOverride = require('method-override') const bodyParser = require('body-parser')


const app = express()


app.set('view engine', 'ejs') // 設(shè)置模板引擎


app.use(bodyParser.json()) 
app.use(methodOverride('_method'))


app.get('/', (req, res) => {
        res.render('index')
    })
})


const port = 5000
app.listen(port, () => {
    console.log(`App listering on port ${port}`)
})

一般來說啟動了app.js的話我們在瀏覽器訪問 http://localhost:5000 就能看到 views/index.ejs 中的界面了，如果沒有，自行查看控制臺是否報錯

3.2 連接我們的Mongodb數(shù)據(jù)庫

我這邊用的本地mongodb數(shù)據(jù)庫，線上也是一樣的，我們可以用NoSQL manager for mongdb來查看我們數(shù)據(jù)庫里面的數(shù)據(jù)，我們新建一個新的集合，我這邊叫 grid_uploads。所以連接的話也是連接這個集合

// 數(shù)據(jù)庫的鏈接 const mongoURL = 'mongodb://localhost:27017/grid_uploads'


const connect = mongoose.createConnection(mongoURL, {
    useNewUrlParser: true,
    useUnifiedTopology: true
})

可以嘗試在NoSQL寫入一些數(shù)據(jù)，具體使用可以參考博客【MongoDB】NoSQL Manager for MongoDB 教程

3.3 美化一下界面（views/index.ejs）

作為一個小兩年的前端工程師，已經(jīng)練就了像素眼了，我們肯定不能把界面做的辣么丑對吧，眼睛過不去啊，所以我們簡單的用bootstrap4來做個界面好了

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上傳</title>
    <link rel="stylesheet"  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        img {
            width: 100%;
        }
    </style>
</head>


<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 m-auto">
                <h2 class="text-center display-4 my-4">Mongo文件上傳</h2>
                <form action="/upload" method="POST" enctype="multipart/form-data">
                    <div class="custom-file mb-3">
                        <input type="file" name="file" id="file" class="custom-file-input">
                        <label for="file" class="custom-file-label">選擇文件</label>
                    </div>
                    <input class="btn btn-primary btn-block" type="submit" value="提交">
                </form>
                <hr>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


</html>

那么我們請求 http://localhost:5000 的話我們看到的應該是這樣子的

美觀界面

（推薦教程：Node.js教程）

3.4 做一些必須的處理

// 定義gfs變量，后續(xù)我們進行數(shù)據(jù)庫文件操作的時候可不能少 let gfs; connect.once('open', () => { // 監(jiān)聽數(shù)據(jù)庫開啟，通過 gridfs-stream 中間件和數(shù)據(jù)庫進行文件的出入控制 gfs = GridFsStream(connect.db, mongoose.mongo) gfs.collection('upload') // 它會在我們數(shù)據(jù)庫中建立 upload.files(記錄文件信息) upload.chunks(存儲文件塊) })


// 使用 multer-gridfs-storage Multer 中間件來講我們上傳的附件直接存儲到MongoDb
const storage = new GridFsStorage({
    url: mongoURL,
    file: (req, file) => {
        return new Promise((resolve, reject) => {
            // 下面注釋部分是給文件進行重命名的，如果想要原文件名稱可以自行使用 file.originalname 返回，
            // 建議有時間的小伙伴存儲兩個文檔，一個記錄原文件名，一個記錄加密文件名，然后返回到頁面的時候可以將中文名返回去

            
            // crypto.randomBytes(16, (err, buf) => {
            //     if (err) {
            //         return reject(err)
            //     }
            //     const filename = buf.toString('hex') + path.extname(file.originalname)
            //     const fileinfo = {
            //         filename,
            //         bucketName: 'upload'
            //     }
            //     resolve(fileinfo)
            // })
            const fileinfo = {
                filename: new Date() + '-' + file.originalname,
                bucketName: 'upload'
            }
            resolve(fileinfo)
        })
    }
})


const upload = multer({ storage })

3.5 寫我們上傳第一個文件的接口

app.post('/upload', upload.single('file'), (req, res) => { res.redirect('/') })

看起來簡簡單單，請記著這么幾件事

在views/index.ejs中（input type=file 指定的name得和接口的upload.single('file') 一樣
上傳完文件我們重定向回我們的首頁此時我們就可以在NoSql看到我們的兩個文檔有數(shù)據(jù)了

（推薦微課：Node.js微課）

這是upload.chunks

upload.chunks

這是upload.files

upload.files

3.6 獲取我們所有的文件信息

獲取我們所有的文件

app.get('/files', (req, res) => { // 通過查找返回一個數(shù)組對象回去 gfs.files.find().toArray((err, files) => { if (!files || files.length === 0) { return res.status(404).json({ err: '文件不存在！' }) } return res.json(files) }) })

我們可以進行一些美化操作，比如我們可以將上傳是圖片的，返回到界面的話以圖片顯示，其他則以 a 標簽的格式顯示（可點擊下載），所以我們可以將 views/index.ejs的界面進行美化改造（ejs語法用起來確實蠻麻煩的），進行重新排版以及添加刪除按鈕

<!DOCTYPE html> <html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上傳</title>
    <link rel="stylesheet" 
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        img {
            width: 100%;
        }
    </style>
</head>


<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 m-auto">
                <h2 class="text-center display-4 my-4">Mongo文件上傳</h2>
                <form action="/upload" method="POST" enctype="multipart/form-data">
                    <div class="custom-file mb-3">
                        <input type="file" name="file" id="file" class="custom-file-input">
                        <label for="file" class="custom-file-label">選擇文件</label>
                    </div>
                    <input class="btn btn-primary btn-block" type="submit" value="提交">
                </form>
                <hr>
            </div>
        </div>
        <div class="row">
            <% if(files){ %>
            <% files.forEach(function(file){ %>
            <div class="col-sm card card-body m-3  col-md-2">
                <% if(file.isImage){ %>
                <img src="image/<%= file.filename %>" />
                <% } else { %>
                <a href="download/<%= file.filename %>"><%= file.filename %></a>
                <%}%>
                    <form action="/files/<%= file._id%>?_method=DELETE" method="POST">
                <button class="btn btn-danger btn-block mt-4">刪除</button>
                </form>
            </div>
            <% }) %>
            <% }else { %>
            <p class="card card-body text-center display-4 my-4">文件不存在</p>
            <% } %>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>


</html>

（推薦教程：MongoDB教程）

要將 ejs 中的files變量獲取到我們應該重寫一下 get('/')接口，使其在訪問localhost:5000的時候先去讀取一下數(shù)據(jù)庫文件信息并輸出到頁面中去

app.get('/', (req, res) => { gfs.files.find().toArray((err, files) => { if (!files || files.length === 0) { res.render('index', { files: false }) return } files.map(file => { // 如果是以下圖片類型我們就在前端展示出來，其余一律按附件處理，通過 isImage 來區(qū)分圖片和非圖片 const imageType = ['image/png', 'image/jpg', 'image/gif', 'image/jpeg'] if (imageType.includes(file.contentType)) { file.isImage = true } else { file.isImage = false } }) res.render('index', { files: files }) }) })

完成上述的情況我們訪問首頁的話就行該是如下情況

訪問首頁

3.7 單個文件下載

在這里我們通過a標簽訪問 /download/:filename 接口，filename是文件名，當然可以用其他的比如_id，當查找到有該附件的時候就將它合并成可讀留，通過管道返回，這樣在前端界面上點擊文件標題就可以直接下載了

app.get('/download/:filename', (req, res) => { gfs.files.findOne({ filename: req.params.filename }, (err, file) => { if (!file) { return res.status(404).json({ err: '文件不存在！' }) } const readstream = gfs.createReadStream(file.filename) readstream.pipe(res) }) })

3.8 單個文件刪除

在這里我們通過a標簽訪問 /files/:id 接口，id對應，點擊刪除按鈕，就直接刪除了，并重定向到首頁

app.delete('/files/:id', (req, res) => { gfs.remove({ _id: req.params.id, root: 'upload' }, (err) => { if (err) { return res.status(404).json({ err: '刪除的文件不存在！' }) } res.redirect('/') }) })

由于我們一直用form做請求，但是form表單沒有delete請求方式，所以我們用到了method-override插件，當然要是用Ajax就沒關(guān)系了，我們項目畢竟速成嘛，主要看效果和過程。

（推薦微課：MongoDB入門與案例分析）

4 完結(jié)撒花了

簡簡單單的告一段落了，學了的小伙伴們可以嘗試更加深入的操作，所以我們就可以用此項目來做一個圖床或者小網(wǎng)盤盤，還是簡簡單單滴。當然該附件上傳也有一定的限制問題，比如大文件可能上傳時間更久，我們就需要采用文件分片方式上傳了。

以上就是個關(guān)于如何使用用Node+MongoDB搭建簡單的圖床或者網(wǎng)盤的相關(guān)介紹了，希望對大家有所幫助。

MongoDB

2 人點贊