nodejs使用express上傳文件[圖片]

nodejs能夠有不少種方式進行上傳文件,此次個人是使用express實現比較簡單的圖片上傳。css

uploads  上傳圖片的文件夾   public 放置靜態的文件  views 渲染的頁面文件node

controller/router.js 上傳圖片邏輯文件express

1. 新建app.js,編寫相關邏輯bash

let express = require('express')
let app = express()
let router = require('./controller/router')        // 對於路由展現的邏輯我寫在了controller裏面
app.set("view engine", "ejs")        // 模板引擎這裏使用的是ejs
app.use(express.static("./public"))        // 路由中間件,靜態頁面,這裏放css,js之類的
app.use(express.static('./uploads'))        // 這裏是上傳文件的文件夾

app.get("/up", router.showUp);        // 上傳圖片頁面
app.post("/up", router.doPost)

app.listen(3000)複製代碼

2. 上傳圖片頁面  views/up.ejs [node會自動查找views下面對應的頁面] app

<form method="post" action="#" enctype="multipart/form-data">
  // 默認提交到當前頁面 post方式
    <label for="exampleInputFile">選擇圖片</label>
    <p>尺寸小於1M</p>    <input type="file" id="exampleInputFile" name="tupian">
    <button type="submit">上傳</button>
</form>複製代碼

3. 編寫上傳圖片邏輯  controller/router.jsdom

let formidable = require("formidable");
let path = require("path");
let fs = require("fs");
let sd = require("silly-datetime");

exports.showUp = (req,res) => {      
    res.render("up")
}

exports.doPost = (req,res) => {
    let form = new formidable.IncomingForm();    
    // tempup文件夾是臨時文件夾,暫時存放上傳的文件圖片
    form.uploadDir = path.normalize(__dirname, + "/../tempup/")
    form.parse(req, (err, fields, files, next) => {
        if(err) {
            next();
            return;
        }
        let size = parseInt(files.tupian.size);     // 判斷當前上傳圖片大小
        if(size > 1 * 1024 * 1024){            
            res.send("圖片尺寸應該小於1M");            
            fs.unlink(files.tupian.path); // 超於文件規定的大小 那麼對上傳文件的進行刪除 
            return;
        }     
        let ttt = sd.format(new Date(), 'YYYYMMDDHHmmss');
        let ran = parseInt(Math.random() * 89999 + 10000);
        let extname = path.extname(files.tupian.name);     // 用時間戳隨機數加上拓展名
        let wenjianjia = fields.wenjianjia;       // 當前上傳的文件夾名稱        
        let oldpath = files.tupian.path;
        // 給圖片更改統一格式的名稱
        let newpath = path.normalize(__dirname + "/../uploads/"+ wenjianjia + "/" +ttt +ran + extname); 
        fs.rename(oldpath,newpath,(err) => {     // 將文件移動到要上傳的文件夾上面            if(err){                res.send("更名失敗");                return;            }            res.send("bingo");        });    })
}複製代碼

4. 這樣就完成了簡單的圖片上傳。post

相關文章
相關標籤/搜索