1. 程式人生 > >nodejs express 框架 上傳圖片,上傳頭像問題

nodejs express 框架 上傳圖片,上傳頭像問題

上傳圖片總結:

必須 安裝’multer’模組
Npm I multer –S(手動輸入小寫)

第一步
App.js 裡面 掛載index路由之前寫入

app.use(express.static(path.join(__dirname, 'public')));
var multer = require('multer'); //刪除圖片臨時放在'/tmp/'
app.use(multer({ dest: '/tmp/'}).array('image')); //必須與表單的name名字相同,表單的上傳圖片的input的name必須是array後面的內容

第二步:
users路由

下面,引入path 和 fs 上傳圖片模組 multer

var fs = require('fs');
var path = require('path');
var multer = require('multer');//安裝上傳圖片模組

//使用者頭像 上傳 渲染頁面

router.get('/article', function (req, res) {
  res.render('article', {
    title: "上傳頭像",
  })
})

//上傳頭像介面

router.post('/file_upload', function (req, res) {
  console.log(req.files) //上傳的路徑../public/images/ue/
  var des_file = path.join(__dirname, "../public/images/ue/" + req.files[0].originalname);
  console.log(des_file);
  fs.readFile(req.files[0].path, function (err, data) {
    fs.writeFile(des_file, data, function (err) {
      if (err) {
        console.log(err);
      } else {
        res.redirect('/users/article');
      }
    });
  });
})

第三步:
前端頁面:

檔案上傳:

選擇一個檔案上傳:
  <form action="/users/file_upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" />
    <br />
    <input type="submit" value="上傳檔案" />
  </form>

如果把圖片上傳到資料庫當中,參考以下程式碼

//上傳頭像介面
router.post('/file_upload', function (req, res) {
  var uid = new ObjectID(req.session.uid);
  // console.log(req.session.uid)
  var des_file = path.join(__dirname, "../public/images/ue/" + req.files[0].originalname);
  // console.log("/images/ue/" + req.files[0].originalname);
  fs.readFile(req.files[0].path, function (err, data) {
    fs.writeFile(des_file, data, function (err) {
      if (err) {
        console.log(err);
      } else {
        dbConnect('users').then(function({coll,dbCon}){
          var imgurl = "/images/ue/" + req.files[0].originalname;
          // console.log(imgurl);
          var whereStr = {_id:uid};//查詢條件
          var updateStr = {$set: { "imgurl" : imgurl }};
          coll.updateOne(whereStr, updateStr,  function(err, data) {
            if (err) throw err;
            console.log("更新成功");
        });
        dbCon.close();
        }).catch(function(err){
          console.log(err);
        })   
        res.redirect('/users/person');
      }
    });
  });
})

封裝了一個連線資料庫的函式 dbConnect

封裝連線資料庫如下


var MongoClient = require('mongodb').MongoClient;
// console.log(MongoClient);
var dbpath = 'mongodb://localhost:27017';
var dbName = 'zzblog';

function  dbConect(collectName){
    var p = new Promise(function(resolve,reject){
        MongoClient.connect(dbpath,function(err,dbCon){
            if(err) reject(err);
            var db = dbCon.db(dbName);

            db.collection(collectName,function(err,coll){
                if(err) reject(err);
                resolve({coll,dbCon})
            })
        
          })
    })
    return p;
   
  }

  module.exports = dbConect;