基于react+nodejs+mongodb+webpack+redux实现图片上传应用

//用于获取数据的操作
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var models = require('./models.js');

for(var m in models){
    mongoose.model(m,new Schema(models[m]));
}

module.exports = {
    getModel : function(type){
        return _getModel(type);
    }
};

var _getModel = function(type){
    return mongoose.model(type);
}

var express = require('express');
var session = require('express-session');
var router = express.Router();
var formidable = require("formidable");
var path = require('path');
var fs = require("fs");
var csrf = require('csurf');

// 注册
router.post("/register",(req,res) => {
    var User = global.dbHandle.getModel("users");
    var uname = req.body.uname,
        upwd = req.body.upwd,
        result = {};

    User.findOne({name : uname },(err , doc) => {
        if(err){
            res.rend(500);
        }else if(doc){
            res.send(501);  //用户名已经存在
        }else{
            User.create({
                name : uname,
                password : upwd
            },(err , doc ) => {
                if(err){    
                    res.send(500);
                }else{
                    var user = JSON.parse(JSON.stringify(doc));
                    req.session.user = user.name;
                    res.send(200);  //注册成功
                }
            })
        }
    })
});

//登陆
router.post("/login",(req,res) => {
    var User = global.dbHandle.getModel('users'),
        uname = req.body.uname,
        sess = req.session;

    User.findOne({
        name : uname
    }, (err,doc) => {
        if(err){    
            res.sendStatus(500);      //登陆失败
        }else if(!doc){
            res.sendStatus(404);      //用户名不存在
        }else{
            if(req.body.upwd != doc.password){
                res.sendStatus(403);      //密码错误
            }else{
                var user = JSON.parse(JSON.stringify(doc));
                sess.user = user.name;
                res.sendStatus(200);        //登陆成功
            }
        }
    })
});

//退出登陆
router.post("/logout",(req,res) => {
    req.session.user = null;
    req.session.imgUrl = null;
    res.send("200");
});

//上传图片
router.post("/upload",(req,res) => {
    var form = new formidable.IncomingForm(),
        targetDir = path.join(__dirname,"../public/uploadImages"),
        User = global.dbHandle.getModel('users'),
        filesArr = [],
        extName = '',
        times = new Date().getTime(),
        imgArr = req.session.imgArr == undefined ? [] : req.session.imgArr;

    form.encoding = 'utf-8';        //设置编码
    form.uploadDir = targetDir;     //设置上传目录
    form.keepExtensions = true;       //保留后缀
    form.maxFieldsSize = 2*1024*1024;       //设置图片大小
    
    //检验存储上传的文件是否存在
    fs.access(targetDir,(err) => {
        if(err){
            fs.mkdirSync(targetDir);
        }
        _fileParse();
    });

    function _fileParse(){
        form.on("file",(filed,file) => {
            filesArr.push(file);
        })

        form.parse(req, (err, fields, files) => {
            if(err){
                res.locals.error = err;
                return;
            }
            for(var obj of filesArr){
                var filePath = obj.path,
                    fileOleName = obj.name.substring(0,obj.name.lastIndexOf('.')),
                    fileExt = filePath.substring(filePath.lastIndexOf('.')),
                    curTime = new Date().getTime();

                times = times == curTime ? (curTime+1) : curTime;

                var fileName = times + fileExt,
                    targetFile = path.join(targetDir,fileName);

                fs.renameSync(filePath, targetFile);
                imgArr.push({imgUrl:`/public/uploadImages/${fileName}`,name:fileOleName });
            }

            User.update({
                name : req.session.user
            },{
                imageUpload : imgArr
            },(err) => {
                if(err){
                    res.send(500);
                }
            })
            req.session.imgArr = imgArr;
            res.sendStatus(200);
            // res.redirect("/");
        })
    }
});

//获取图片
router.get("/getImages",(req,res) => {
    var User = global.dbHandle.getModel("users");
    var imgArr = req.session.imgArr == undefined ? [] : req.session.imgArr;

    User.findOne({
        name : req.session.user
    },(err,doc) => {
        if(err){
            res.send(404);
        }else if(doc){
            doc = JSON.parse(JSON.stringify(doc));
            if(doc.imageUpload){
                imgArr = doc.imageUpload;
                req.session.imgArr = imgArr;
                console.log(imgArr);
                res.json(imgArr);
            }
        }else{
            res.json(imgArr);
        }
    })
});

router.get("/",(req,res) => {
    var sess = req.session;
    res.send(200);
})

module.exports = router;

var express = require('express');
var session = require('express-session');
var router = express.Router();
var fs = require("fs");
var csrf = require('csurf');


//判断是否登陆
router.get("/isLogin",(req,res) => {
    var sess = req.session,
        token = sess.token;

    if(sess.user){
        token = token == undefined ? req.csrfToken() : token;
        sess.token = token;

        res.send(JSON.stringify({code : 200 , user : sess.user , token : token}));
    }else{
        res.send(JSON.stringify({code : 403}))
    }
});

//删除图片
router.post("/deleteImages",(req,res) => {
    var User = global.dbHandle.getModel("users"),
        num = req.body.num,
        imgArr = req.session.imgArr,
        imgUrl = imgArr[num].imgUrl,
        filePath = imgUrl.substring(1);

    //本地文件删除
    fs.unlink(filePath,(err) => {
        if(err){
            console.log(err);
        }
    })

    imgArr.splice(num,1);

    User.update({
        name : req.session.user
    },{
        imageUpload : imgArr
    },(err) => {
        if(err){
            res.send(500);
        }else{
            req.session.imgArr = imgArr;
            res.send(200);
        }
    })
});

router.get("/",(req,res) => {
    var sess = req.session;
    res.send(200);
})
module.exports = router;

const path = require('path');
module.exports = {    
    entry: './src/index.js',
    output: {
        filename: './build/index.js',
        publicPath : '/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    }
}

export const REQUEST_ISLOGIN = "REQUEST_ISLOGIN"
export const RECEIVE_LOGINED = "RECEIVE_LOGINED"
export const RECEIVE_NOT_LOGIN = "RECEIVE_NOT_LOGIN"
export const REQUEST_IMAGES = "REQUEST_IMAGES"
export const RECEIVE_IMAGES = "RECEIVE_IMAGES"
export const UPLOAD_IMAGES = "UPLOAD_IMAGES"
export const EXIT_LOGIN = "EXIT_LOGIN"

//退出登录操作
export const exitLogin = () => ({
    type : EXIT_LOGIN
})
//判断是否登录前操作
export const requestIslogin = () => ({
    type : REQUEST_ISLOGIN
})
//判断是否登录后，返回已登陆的操作，返回用户名跟唯一的token
export const receiveLogined = json => ({
    type : RECEIVE_LOGINED,
    user : json.user,
    token : json.token
})
//判断是否登录后，返回为登录的操作
export const receiveNotLogined = () => ({
    type : RECEIVE_NOT_LOGIN
})
//请求图片前操作
export const requestImages = () => ({
    type : REQUEST_IMAGES
})
//请求图片后的操作，返回获取的图片
export const receiveImages = json => ({
    type : RECEIVE_IMAGES,
    images : json
})

//判断是否登录
export const fetchIslogin = () => dispatch => {
    dispatch(requestIslogin())
    return fetch("/isLogin",{
                method : "get",
                credentials: 'include',
                header : {
                    "Content-Type" : "application/json"
                }
        })
        .then(res => res.json())
        .then(json => {
            if(json.code == 200){
                dispatch(receiveLogined(json))
                dispatch(requestImages())
                return fetch("/getImages",{
                    method : "get",
                    credentials: 'include',
                    header : {
                        "Content-Type" : "application/json"
                    }
                })
                .then(res => res.json())
                .then(json => dispatch(receiveImages(json)))
            }else{
                dispatch(receiveNotLogined())
            }
        })
}
//请求图片
export const fetchImages = () => dispatch => {
    dispatch(requestImages())
    return fetch("/getImages",{
        method : "get",
        credentials: 'include',
        header : {
            "Content-Type" : "application/json"
        }
    })
    .then(res => res.json())
    .then(json => dispatch(receiveImages(json)))
}
//根据是否登录来能否请求图片
const shouldFetchImages = state => {
    const isLogin = state.user;
    if(isLogin.length > 0){
        return true
    }
    return false;
}
//根据是否登录来能否请求图片
export const fetchImagesIfNeeded = () => (dispatch,getState) => {
    console.log(getState());
    if(shouldFetchImages(getState())){
        return dispatch(fetchImages())
    }
}
//上传图片
export const uploadImages = images => ({
    type : UPLOAD_IMAGES,
    images
})