NodeJS+七牛云实现图片上传

本文主要介绍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为自定义目录，如果没有该目录，方法可是会报错的哦。不会自己创建。