转载请注明出处: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",         //您的AccessKeysk: "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) {//需要手动修改为当前漫画idvar 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多的图片,速度还是很不错的。

转载于:https://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html

【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画(可选)相关推荐

  1. 【前端】Vue2全家桶案例《看漫画》之六、图片阅读页

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_6.html 项目github地址:https://github.com/shamoyuu/ ...

  2. 【前端】Vue2全家桶案例《看漫画》之四、漫画页

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_4.html 项目github地址:https://github.com/shamoyuu/ ...

  3. 前端开发全家桶:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 ...

  4. Vue2全家桶+Element搭建的PC端在线音乐网站

    目录 1,前言 2,已有功能 3,使用 4,目录结构 5,页面效果 1,前言 项目基于Vue2全家桶及网易云音乐 Node Api实现,网站风格简约清新,体验比较流畅. 下载地址:https://gi ...

  5. yolov5使用2080ti显卡训练是一种什么样的体验我通过vscode搭建linux服务器对python-yolov5-4.0项目进行训练,零基础小白都能看得懂的教程。>>>>>>>>>第二章番外篇

    第二章番外篇:yolov5通过vscode搭建linux服务器对python-yolov5-4.0项目进行训练,零基础小白都能看得懂的教程.YOLOv5搭建的最快搭建方式,踩坑经历详谈 前期准备: 2 ...

  6. 基于vue2全家桶开发的匿名朋友圈及聊天应用

    前言 学习了vue全家桶后一直想找个机会来写一个完整一点的项目,这次学校举办的比赛就是一个很好的契机.由于是自己瞎搞搞,所以写起来比较随心所欲,没有过多地从设计和产品的角度去思考.这个项目包括了图片上 ...

  7. Vue2全家桶之一:vue-cli(vue脚手架)超详细教程

    vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成 vue-cli这个构建工具大大降低了 ...

  8. WEB前端 Vue 全家桶介绍

    Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https: ...

  9. 我用Vue2全家桶重写「daza.io」的前端

    文章固定链接:https://daza.io/articles/58303 在发布第一版的daza.io的时候 Vue 2 已经发布了,但当时的进度已经快完成了,所以就没有立即升级到 Vue 2. 在 ...

最新文章

  1. 白宫计划2019年春季发布新版人工智能研究战略
  2. Linux shell 自启动脚本写法
  3. WIN7 X64 Setup Oracle Developer Suite 10g
  4. 从搜索到AI,成为“小百度”的搜狗,没有新故事
  5. eclipse修改项目访问前缀
  6. Silverlight 应用 WCF RIA Services 在 IIS6 部署问题总结
  7. python web开发 网络编程 HTTP协议、Web服务器、WSGI接口
  8. bootstrap 富文本_入坑吗?说说几个富文本编辑器
  9. ubutnu16.04下Intel Realsense D435驱动的安装和python环境的配置
  10. C语言不挂科之我爱谭浩强——选择填空拿满分(附例题答案和知识点详解)
  11. 玉米叶片病害识别与分类的优化密集卷积神经网络模型
  12. abcde依次进入一个队列_『并发包入坑指北』之阻塞队列
  13. Java缓存技术-google guava cache
  14. win7护眼透明主题 “魅力win7”
  15. java 面向对象三个特征_[Java] 面向对象的三个特征与含义
  16. geoserver中sld设置
  17. 创龙基于Xilinx Artix-7系列FPGA处理器的HDMI、SFP接口
  18. ASR项目实战-从源码开始构建Kaldi
  19. 使用递归方法查询所有分类(一)
  20. 面向时空异构数据的联邦学习

热门文章

  1. 原生js —— 表单验证练习(12306注册)
  2. 提交按钮submit
  3. BOSHIDA 电源模块 PLC的硬件结构配置与工作原理
  4. 实战_之逆向人工智能计算器(脱壳授权)
  5. SpringSession ( 一 ) HttpSession
  6. python实战-educoder平台作业提醒小助手
  7. 通过腾讯云的文字识别进行图文转换【java】
  8. .deb与rpm适用Linux系统,以及其包管理工具
  9. 如何使用局部敏感哈希(LSH)算法进行特征降维?
  10. 域起网络携手几维安全,护航互联网游戏业务安全