node.js篇-express4.X 上傳圖片功能並顯示圖片列表

現學現賣，用node.js基於express做一個圖床。第一部分基礎核心功能實現，后期會陸續加上一些登錄注冊等功能。

上傳圖片核心代碼

1、定義照片模型

2、創建照片上傳表單

3、顯示照片上傳列表

一、准備工作：

安裝各版本：

node  v12.10.0

"express": "^4.14.0"

"mongodb": "^2.2.4"

 

node.js基礎教程

https://www.runoob.com/nodejs/nodejs-jxcore-packaging.html

mongodb教程

https://www.runoob.com/mongodb/mongodb-mongostat-mongotop.html

可視化一開始用的Studio 3T.app感覺蠻好用，可惜需要過期續費懶得折騰了換了adminMongo很方便基本功能滿足了附上鏈接 https://github.com/mrvautin/adminMongo

渲染視圖用的EJS模版，需要指定EJS模版引擎，需要指定-e,(或--ejs)標記，執行express -e photo

 二、下面實現核心代碼

2.1、實現是照片模型

npm install mongoose --save

創建文件./models/Photo.js

var mongoose = require('mongoose');
 mongoose.connect('mongodb://localhost/photo_app');
var schema = new mongoose.Schema({
     name: String,
     path: String
});
module.exports = mongoose.model('Photo', schema);

2.2、創建照片上傳表單，渲染上傳圖片列表

創建文件./views/photos/upload.ejs

 <form  method='post' enctype="multipart/form-data">
        <p> <input type="text" class="photo-name" name='photoName' placeholder="name" /></p>
        <p><input type="file" class="photo-image" name='photoImage' /></p>
        <p><input type="submit"  class="btn photo-upload" value="Upload" /></p>
 </form>

創建文件./views/photos/index.ejs

 <div id="photos">
        <% photos.forEach(function(photo) { %>
            <div  class="photo">
                <h2><%=photo.name%></h2>
                <img src="/photos/<%=photo.path%>" alt="圖片">
                <p>圖片鏈接： "<span class="getPhotoHref"></span><span class="getPhoto">/photos/<%=photo.path%></span> "</p>
            </div>
        <% }) %>
    </div>

 

2.3、為上傳皂片添加路由

創建文件./routes/photos.js

var Photo = require('../models/Photo')
var path = require('path')
var fs = require('fs')
var join = path.join;

//從數據庫獨處數據顯示圖片列表
exports.list = function(req, res, next){
    Photo.find({}, function(err, photos){
        if(err) return next(err);
        res.render('photos', {title: '**圖片列表**', photos: photos});
    });
}
//提交數據到數據庫
exports.form = function(req, res){
    res.render('photos/upload', {
        title: '圖片上傳'
    })
}
exports.submit = function(dir){
   return function(req, res, next){
        var img = req.files.photoImage;
        var name = req.body.photoName || img.name;
        var path = join(dir, img.name);
        fs.rename(img.path, path, function(err){
            if(err) return next(err);
            Photo.create({
                name: name,
                path: img.name
            }, function(err){
                if(err) return next(err);
                res.redirect('/')
            });
        });
   };
};

把照片目錄傳給POST處理器，並返回一個路由回調，以便處理器可以訪問這個目錄，返回把新路由添加到app.js中，放在默認路由（/）下面

var multer  = require('multer');
var indexRouter = require('./routes/index');
var photos = require('./routes/photos');

app.set('photos', path.join(__dirname, 'public/photos'));

app.use(multer({dest: app.get('photos')}));
app.get('/', photos.list);
app.get('/upload', photos.form);
app.post('/upload', photos.submit(app.get('photos')));

multe中間件需要注意一下，上面的用法，版本我這里裝的是

npm install multer@0.1.8
如果你用的是multer 1.X.X版本可以官網查下新的用法https://github.com/expressjs/multer
否則會報錯上傳圖片報錯拋出錯誤：'app.use() requires middleware functions'

 實現效果如下：

adminMongo配置注意項

adminMongo 監聽默認host和port是localhost和1234 .想修改的可以在項目目錄下修改/config/app.json

{
    "app": {
        "host": "10.0.0.1",
        "port": 4321,
        "password": "secureadminpassword",
        "locale": "de",
        "context": "dbApp",
        "monitoring": false
    }
}

線上配置注意項host改成內網IP或者0.0.0.0,否則公網訪問不了（騰訊雲公網IP無法訪問（公網IP無法綁定-監聽）的解決辦法）

127.0.0.1、localhost、0.0.0.0、本機IP地址

What's the difference between 127.0.0.1 and 0.0.0.0?

MongoDB 數據庫創建刪除、表（集合）