今天刚把博客用 cdn 加速,但是文件上传还存在之前的服务器中,七牛云那么多免费空间和流量,不用白不用,果断把文件直接上传到七牛云中.
附上博客地址DemonGao 个人技术博客
这篇文章也是看了前人的攻略来写的,作为自己的一个记录

安装

---

通过 npm 以 node 模块化的方式安装：

npm install qn bytes multer --save

• multer： 上传文件的中间件来上传文件的。

• qn ： 第三方提供的上传文件至七牛云模块。

文件上传

---

做了一个简单的分离

上传核心代码：

1.七牛云配置文件

/**
 * Created by demongao on 2017/3/14.
 * config.js
 */
const path = require('path');
module.exports = {
    root: path.resolve(__dirname, '../'), //根目录
    //七牛云 配置
    serverUrl:'服务器地址',
    qiniu_config:{
        //需要填写你的 Access Key 和 Secret Key
        accessKey:'accessKey',
        secretKey:'secretKey',
        bucket: 'bucket',
        origin: '',
    }
}

2.multer 图片上传的配置

/**
 * Created by demongao on 2017/3/14.
 * multerUtil.js
 */
const bytes = require('bytes');
const multer = require('multer');
// 配置multer
// 详情请见https://github.com/expressjs/multer
const storage = multer.memoryStorage()
const upload = multer({
    storage: storage,
    limits: {
        fileSize: bytes('4MB') // 限制文件在4MB以内
    },
    fileFilter: function(req, files, callback) {
        // 只允许上传jpg|png|jpeg|gif格式的文件
        var type = '|' + files.mimetype.slice(files.mimetype.lastIndexOf('/') + 1) + '|';
        var fileTypeValid = '|jpg|png|jpeg|gif|'.indexOf(type) !== -1;
        callback(null, !!fileTypeValid);
    }
});

module.exports = upload;

3.路由设置

/**
 * Created by demongao on 2017/3/14.
 * qnupload.js
 */
// Express.js以及路由
const express = require('express');
const router = express.Router();

const qn = require('qn');
const upload = require('./../config/qiniuUtil')
var config = require('./../config/config').qiniu_config;
var serverURL = require('./../config/config').serverUrl;;
router.post('/profile', function(req, res, next) {
    // 七牛相关配置信息
    let client = qn.create(config);
    // 上传单个文件
    // 这里`avatar`对应前端form中input的name值
    upload.single('avatar')(req, res, function(err) {
        if (err) {
            return console.error(err);
        }
        if (req.file && req.file.buffer) {
            
            //获取源文件后缀名
            var fileFormat = (req.file.originalname).split("."); 
            //设置上传到七牛云的文件命名
            var filePath = '/upload/article/' + req.file.fieldname + '-' +Date.now() + '.' +fileFormat[fileFormat.length - 1];
            // 上传到七牛 
            client.upload(req.file.buffer, {
                key: filePath
            }, function(err, result) {
                if (err) {
                    res.status(200).send({
                        statu:0,
                        msg:'上传失败'

                    });
                }
                res.status(200).send({
                    statu:1,
                    result:{
                        //将保存路径传递给页面(我用的 markdon 编辑器)
                        path:serverURL+filePath  
                    }
                })
            });
        }
    });
})

module.exports = router;

图片描述

上图 就是我用这个上传的图片,感觉不错~ 博客的确变快了不少(O(∩_∩)O~)

写到这里,我在想一个问题,如果我换了一个存储图片的地方,我图片路径怎么处理,因为我用的 markdown, 直接将图片路径保存成本文了 , 我的想法是:
读取数据库文章内容,然后使用正则表达式匹配出[***](**) 里面的地址路径,并将我 cdn 的域名换成要存放图片的域名

也不知道我这个想法正不正确,不过是可以拿出来的

推荐一个压缩软件

---

上传图片的时候,可能图片比较大,可以压缩一下, 给大家推荐一个比较良心的软件 PP鸭,
好用,可以批量压缩图片,还可以恢复为原图 ,Mac 版也可以用喔 , 虽然一次只能压缩10张,不过重启一下还能继续压缩.附上下载地址PP鸭

图片描述

参考:

---

• multer官方文档：https://github.com/expressjs/multer
• qn文档：https://www.npmjs.com/package/qn
• bytes文档：https://github.com/visionmedia/bytes.js
• 基于express+multer+qn上传文件到七牛云

另外:推荐一篇关于 vue-cli webpack配置的详解vue-cli#2.0 webpack 配置分析

---

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

前端Demon