基于express+multer+qn上传文件到七牛云

上传图片是网站中常见的需求,由于流量有限,将图片等文件存储在“云”上即可以节省流量又可以提高加载速度。本文介绍了基于Express.js,配合multer和qn模块,将文件上传到七牛云的方法。

安装依赖

1
npm install qn bytes multer --save
  • qn第三方提供的上传文件至七牛云模块
  • multerExpress.js上传文件的中间件
  • bytes单位转换的模块

代码示例

首先配置上传的接口,暂定为/api/v1/upload,新建upload.js处理上传的相关任务。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Express.js以及路由
const express = require('express');
const router = express.Router();
// 引入qn、bytes、multer
const qn = require('qn');
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('2MB') // 限制文件在2MB以内
},
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);
}
});

接下来是在路由里处理上传的文件,buffer直接上传到七牛云。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
router.post('/', function(req, res, next) {
// 七牛相关配置信息
let client = qn.create({
accessKey: ''
secretKey: '',
bucket: '',
origin: '',
});
// 上传单个文件
// 这里`image`对应前端form中input的name值
upload.single('image')(req, res, function(err) {
if (err) {
return console.error(err);
}
if (req.file && req.file.buffer) {
// 上传到七牛
client.upload(req.file.buffer, {
key: '/upload/' + new Date().getTime()
}, function(err, result) {
if (err) {
return res.json({
code: 1,
msg: '上传失败!',
data: {
src: ''
}
});
}
res.json({
code: 0,
msg: '上传成功!',
data: {
src: result.url + '?imageslim'
}
});
});
}
});
})

前端通过Ajax将文件提交到服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form id= "uploadForm">
<div class="form-block">
<input class="upload-input" name="image" type="file" value="">
</div>
<div class="form-block">
<button class="avatar-submit">上传头像</button>
</div>
</form>
<script>
$(".avatar-submit").on("click",function() {
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url: '/api/v1/upload',
type: 'POST',
data: formData,
success: function(res) {
if(res.code==0) {
alert(res.msg);
} else {
alert(res.msg);
}
}
});
})
</script>

至此,实现了上传文件到七牛云并获取图片地址的功能。

相关链接

multer官方文档:https://github.com/expressjs/multer

qn文档:https://www.npmjs.com/package/qn

bytes文档:https://github.com/visionmedia/bytes.js