Express+layui上传图片到七牛云

最新推荐文章于 2023-11-03 01:11:16 发布

weijia_kmys

最新推荐文章于 2023-11-03 01:11:16 发布

阅读量1.6k

点赞数 2

分类专栏： NodeJS 文章标签：七牛 express node.js

本文链接：https://blog.csdn.net/weijia_kmy/article/details/77586691

版权

NodeJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基于上一篇Express入门。继续写下去哈。

一、新建文件

在根目录下新建common、config文件夹。在common下新建文件upload.js，在config下新建文件config.js。

前往http://www.layui.com/下载layui框架，解压到public目录下。目录结构如下：

二、安装依赖

    cnpm install qn bytes multer

三、编写config/config.js

注册登陆七牛云，获得 Access Key 和 Secret Key以及bucket和origin。

module.exports = {
    //七牛云 配置
    qiniu_config: {
        accessKey: '',
        secretKey: '',
        bucket: '',
        origin: ''
    }
};

四、编写common/upload.js

"use strict";
const qn = require('qn');
const bytes = require('bytes');
const multer = require('multer');
var config = require('../config/config');

// 配置multer
const storage = multer.memoryStorage()
const upload = multer({
    storage: storage,
    limits: {
        fileSize: bytes('2MB') // 限制文件在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);
    }
});

// 这里`image`对应前端中input的name值
exports.upLoadImage = function(req, res) {
    upload.single("file")(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/'  + "-" + new Date().getTime() + Math.random() + "." + fileFormat[fileFormat.length - 1];
            //七牛相关配置信息
            let client = qn.create(config.qiniu_config);
            // 上传到七牛
            client.upload(req.file.buffer, { key: filePath }, function(err, result) {
                if (err) {
                    return res.json({ status: 0, msg: '上传失败！',  src: ''  });
                }
                return res.json({ status: 1, msg: '上传成功！', src: config.qiniu_config.origin + filePath });
            });
        }
    });
};

五、编写routes/index.js

var express = require('express');
var router = express.Router();
var upload = require('../common/upload');

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});
//上传
router.post('/upload', function(req, res, next) {
    upload.upLoadImage(req, res);
});

module.exports = router;

六、Postman验证

上传成功。Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件，最好是通过chrome网上应用店直接添加到chrome插件中。这一步是保证我们后台代码没有问题。

七、编写views/index.html

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="btn">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="img">
            <p id="demoText"></p>
        </div>
    </div>
</body>
<script src="layui/layui.js"></script>
<script>
layui.use('upload', function() {
    var $ = layui.jquery,
        upload = layui.upload;
    //普通图片上传
    var uploadInst = upload.render({
        elem: '#btn',
        url: '/upload',
        before: function(obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result) {
                $('#img').attr('src', result); //图片链接（base64）
            });
        },
        done: function(res) {
            //如果上传失败
            if (res.status == 0) {
                return layer.alert('上传失败');
            } else {
                return layer.alert('上传成功,图片src为：'+res.src);
            }
            //上传成功
        },
        error: function() {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function() {
                uploadInst.upload();
            });
        }
    });
});
</script>
</html>

完成之后，浏览器界面就显示一个“上传图片”按钮。点击上传图片，选择一张图片后，我的结果如下：