【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画（可选）

转载请注明出处：http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html

项目github地址：https://github.com/shamoyuu/vue-vux-iconan

这一篇属于后台内容，前端小伙伴可以选择阅读。

接口后面都会公开，不会后台的小伙伴可以直接调用。

首先图片存储。图片我会上传到百度的BOS里，是一个支持外链的存储空间，还提供了很多非常方便的功能，后面用到的时候会详细说。

然后数据库用mysql。上传完图片后会把图片的信息都保存起来，方便我们后面调用。

图片处理，会用到gm，因为有些漫画是左右两张放在一张图片上的，我们需要裁切成2份后再上传。

首先我们建表，总共3个表，分别是漫画表（opus）、章节表（chapter）和图片表（picture）

漫画表（opus）

章节表（chapter）

图片表（picture）

然后我们来写一个router吧，它里面有3个接口，分别是添加漫画，重命名文件夹和批处理temp下文件夹。

这个文件是运行在express里的，可以看我以前介绍的在百度BAE搭建node后台的教程：http://www.cnblogs.com/shamoyuu/p/node_bae.html

var express = require("express");
var request = require('request');
var fs = require('fs');
var router = express.Router();
var _ = require("lodash");
var Opus = require("../models/index").Opus;
var Chapter = require("../models/index").Chapter;
var Picture = require("../models/index").Picture;
var gm = require("gm");

var BosClient = require("bce-sdk-js").BosClient;

const config = {
    endpoint: "https://bj.bcebos.com",   //传入Bucket所在区域域名
    credentials: {
        ak: "AccessKey",         //您的AccessKey
        sk: "SecretAccessKey"    //您的SecretAccessKey
    }
};

var client = new BosClient(config);

/**
 * 啥都没有
 */
router.get("/", function (req, res, next) {
    res.send({
        message: "成功",
        stateCode: 0
    });
});

/**
 * 添加一个漫画
 */
router.get("/add", function (req, res, next) {

    Opus.create({
        name: "七龙珠",
        summary: "很久很久以前，地球上散落着七颗神奇的龙珠，传说只要聚齐它们，神龙就会出现，并可以为人实现一个愿望。为了寻找龙珠，布尔玛和孙悟空踏上了奇妙的寻珠之旅……",
        author: "鸟山明",
        cover: "http://iconan.bj.bcebos.com/2%2Fcover.jpg",
        type: 0,
        popularity: 0,
        score: 100,
        createtime: new Date(),
        updatetime: new Date()
    }).then(function () {
        console.info("插入数据完成");
    });

    res.send({
        message: "成功",
        stateCode: 0
    });
});

/**
 * 重命名temp文件夹下除ok外所有文件夹
 */
router.get("/rename", function (req, res, next) {

    fs.readdir("temp", function (err, files) {
        for (var key in files) {
            var dirname = files[key];
            if (dirname != "ok") {
                fs.renameSync("temp/" + dirname, "temp/第" + dirname.match(/龍珠完全版Vol_(\d+)/)[1] + "卷");
            }
        }
    });

    res.send({
        message: "成功",
        stateCode: 0
    });
});

/**
 * 开始处理temp下所有文件夹
 */
router.get("/start", function (req, res, next) {

    //需要手动修改为当前漫画id
    var opusid = 2;
    var chapterid = 1;

    var chapterPosition = 0;

    fs.readdir("temp", function (err, files) {

        console.info(files);

        var dirFoo = [];

        for (var key in files) {
            var chaptername = files[key];
            if (chaptername != "ok") {

                dirFoo.push(function () {
                    return new Promise(function (resolve, reject) {
                        console.info("开始处理章节", chaptername);

                        Chapter.create({
                            opusid: opusid,
                            name: chaptername,
                            type: 0,
                            position: chapterPosition++,
                            createtime: new Date(),
                            updatetime: new Date()
                        }).then(function (model) {
                            console.info("插入数据完成", model.dataValues);

                            chapterid = model.dataValues.id;

                            fs.readdir("temp/" + chaptername, function (err, files) {
                                var pathUrl = "temp/ok/";

                                var num = 0;

                                var fooArr = [];

                                fooArr.push(function () {
                                    return new Promise(function (resolve, reject) {
                                        fs.readdir("temp/ok", function (err, files) {
                                            for (var key in files) {
                                                fs.unlinkSync("temp/ok/" + files[key]);
                                            }
                                            resolve();
                                        });
                                    })
                                });

                                for (var key in files) {
                                    var fileName = files[key];
                                    console.info(fileName);

                                    fooArr.push(function () {
                                        return new Promise(function (resolve, reject) {
                                            var img = gm("temp/" + chaptername + "/" + fileName);
                                            //获取图片尺寸
                                            img.size(function (err, size) {
                                                //如果图片是横向长方形，那么就从中间裁切成2张单独的图片
                                                if (size.width / size.height > 1) {
                                                    img.crop(Math.floor(size.width / 2), size.height, Math.floor(size.width / 2), 0)
                                                        .write(pathUrl + "p" + fill(num++, 4) + ".jpg", function (err) {
                                                            err && console.info(err);
                                                            //第二张图片在第一张裁切完再进行
                                                            img.crop(Math.floor(size.width / 2), size.height, 0, 0)
                                                                .write(pathUrl + "p" + fill(num++, 4) + ".jpg", function (err) {
                                                                    err && console.info(err);
                                                                    resolve();
                                                                });
                                                        });
                                                }
                                                else {
                                                    img.write(pathUrl + "p" + fill(num++, 4) + ".jpg", function (err) {
                                                        err && console.info(err);
                                                        resolve();
                                                    });
                                                }
                                            });
                                        })
                                    })
                                }

                                //顺序同步执行fooArr里的方法
                                reduce(fooArr).then(function () {
                                    console.info("裁切完成，开始上传");

                                    //清空方法数组
                                    fooArr.length = 0;

                                    var picturePosition = 0;

                                    //完成后上传
                                    fs.readdir("temp/ok", function (err, files) {
                                        for (var key in files) {
                                            var fileName = files[key];
                                            if (/^p\d+.jpg$/.test(fileName)) {
                                                console.info(fileName);

                                                fooArr.push(function () {
                                                    return new Promise(function (resolve, reject) {
                                                        console.info("开始上传");
                                                        //获取图片尺寸
                                                        gm(pathUrl + fileName).size(function (err, size) {
                                                            var upFileName = opusid + "/" + chapterid + "/" + Date.now() + ".jpg";
                                                            console.info(upFileName);
                                                            //以文件形式上传
                                                            client.putObjectFromFile("iconan", upFileName, pathUrl + fileName)
                                                                .then(function () {
                                                                    Picture.create({
                                                                        chapterid: chapterid,
                                                                        url: "http://iconan.bj.bcebos.com/" + upFileName,
                                                                        width: size.width,
                                                                        height: size.height,
                                                                        type: 0,
                                                                        position: picturePosition++,
                                                                        createtime: new Date(),
                                                                        updatetime: new Date()
                                                                    }).then(function () {
                                                                        console.info("插入数据完成");
                                                                        resolve();
                                                                    });
                                                                })
                                                                .catch(function () {
                                                                    console.info("上传失败", arguments);
                                                                    reject();
                                                                });
                                                        });
                                                    })
                                                });
                                            }
                                        }

                                        reduce(fooArr).then(function () {
                                            console.info("上传完成");
                                            resolve();
                                        });
                                    });
                                })
                            });
                        });
                    })
                });
            }
        }

        reduce(dirFoo).then(function () {
            console.info("最终完成");
        })
    });

    res.send({
        message: "正在操作中，请在控制台查看进度",
        stateCode: 0
    });
});

/**
 * 将数字补位
 * @param num 需要补位的数字
 * @param n 需要多少位
 * @returns {string}
 */
function fill(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

/**
 * 让一个promise的数组顺序执行
 */
function reduce(arr) {
    var sequence = Promise.resolve();

    arr.forEach(function (item) {
        sequence = sequence.then(item)
    });

    return sequence
}

module.exports = router;

然后把下载好的漫画，以章节为目录复制到temp文件夹下，例如下面的《七龙珠》

先调用rename接口，然后调用start接口，就会看到后台在不断处理和上传图片，坐等几小时后，就会按章节分不同文件夹上传的服务器，然后把外链地址保存到数据库的picture表中。

昨晚上传了5小时，就上传完了《柯南》和《七龙珠》，总共10G多的图片，速度还是很不错的。