本文主要介绍NodeJS+七牛云实现图片上传服务器的功能。
一、准备工作
1.准备一个认证的域名
注:域名需要配置CNAME,建议选一个空域名,将qiniu.作为前缀。
2.七牛云
2.1注册七牛云并认证,耗时1天左右。免费10G的空间。
网址:https://www.qiniu.com/
2.2七牛云认证后一波操作,首页》管理控制台》对象存储》新建存储空间(此处省略傻瓜式操作,不懂可以参考API文档)
2.3绑定域名
注:七牛云有送一个月的域名,适用于测试阶段,项目的话建议申请一个自己的。
二、配置nodejs环境
1.基本配置(之前有文章已描述,此处不再赘述)
2.引入七牛云并配置相关参数
2.1package.json配置
在dependencies添加 "qiniu": "^7.2.1"
{
"name": "mysqldemo",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"qiniu": "^7.2.1",
}
}
2.2在routes文件夹下创建upload.js
var express = require('express');
var router = express.Router();
var fs = require('fs');
// 引入七牛模块
var qiniu = require("qiniu");
//要上传的空间名
var bucket = '';
var imageUrl = ''; // 域名名称
var accessKey = '';
var secretKey = '';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
scope: bucket,
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
var config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z2;
// 图片上传
router.post('/upload', function(req, res, next){
// 图片数据流
var imgData = req.body.imgData;
// 构建图片名
var fileName = Date.now() + '.png';
// 构建图片路径
var filePath = './public/tmp/' + fileName;
//过滤data:URL
var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = new Buffer(base64Data, 'base64');
fs.writeFile(filePath, dataBuffer, function(err) {
if(err){
res.end(JSON.stringify({status:'102',msg:'文件写入失败'}));
}else{
var localFile = filePath;
var formUploader = new qiniu.form_up.FormUploader(config);
var putExtra = new qiniu.form_up.PutExtra();
var key = fileName;
// 文件上传
formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr,
respBody, respInfo) {
if (respErr) {
res.end(JSON.stringify({status:'-1',msg:'上传失败',error:respErr}));
}
if (respInfo.statusCode == 200) {
var imageSrc = imageUrl + respBody.key;
res.end(JSON.stringify({status:'200',msg:'上传成功',imageUrl:imageSrc}));
} else {
res.end(JSON.stringify({status:'-1',msg:'上传失败',error:JSON.stringify(respBody)}));
}
// 上传之后删除本地文件
fs.unlinkSync(filePath);
});
}
});
})
})
module.exports = router;
2.3在app.js使用upload.js
var uploadRouter = require('./routes/upload');
app.use('/upload', uploadRouter);
2.4重启服务器
npm start或npm run build
如此这般,就可以正常上传图片了。以上述为例的接口调用就是 域名+/upload+/upload。
三、编者话
上述方法也可以直接实现图片的本地缓存,和本地缓存的删除,不上传七牛云,但是路径要自己做调整。tmp为自定义目录,如果没有该目录,方法可是会报错的哦。不会自己创建。