基於上一篇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>
我們可以獲取到圖片外鏈。到七牛雲查看也是存在這張圖片的。圖片是上傳成功了。開發中直接上傳圖片是不行的，有時間再寫一篇壓縮圖片上傳吧。