七牛图床上传 - ZJH9Rondo/Blog-Node GitHub Wiki

关于配置七牛文件上传

本项目如何使用

配置文件编写

这里，无论如何不要泄露你的secertKey,我之前就是在一一位用户的Github项目中遇到过写ReadME时忘记移除，导致被滥用的问题

      // /config/qiniu_user.js
       module.exports = {
        'ACCESS_Key': '你当前七牛的accessKey',
        'SECRET_Key': '你当前七牛的secertKey',
        'OPTIONS': {
          scope: '你七牛目的空间的Bucket'
        }
      };

配置文件导出之后，是在/routes/upload_qiniu.js中进行token的验证获取的，这里，如果使用node编写的后台，那么需要下载qiniu package，我在项目依赖中都已写入，只需在项目初始启动前npm install 即可，而相关的在七牛官方文档中均有详细说明。

 /*
* 获取客户端上传token
*   ZJH9Rondo
*/
var express = require('express');
var router = express.Router();
var qiniu = require('qiniu');
var qiniu_user = require('../config/qiniu_user');

// 获取客户端所需token
router.get('/getToken',function (req,res,next){
  var mac = new qiniu.auth.digest.Mac(qiniu_user.ACCESS_Key,qiniu_user.SECRET_Key);

  var putPolicy = new qiniu.rs.PutPolicy(qiniu_user.OPTIONS);
  var uploadToken=putPolicy.uploadToken(mac);

  if(uploadToken){
    res.json({
      'token': uploadToken
    });
  }
});

module.exports = router;

由于这里是使用了七牛所支持的base64位直传方式，所以后端只负责接受请求并验证当前配置文件中的key值之后，向你在七牛所拥有的图床发起请求获取返回的token，前端在拿到token后直接利用Ajax向七牛提供的上传接口发起请求，携带后端返回的token，在上传成功后可以设置七牛的返回值，这个在七牛的开发者文档中都有详细介绍，这里要求返回的是图片所在的获取链接，然后做了处理，将图片的url做了转换，以Markdown的格式插入。

      // 客户端直传函数
      function upload_base64(base64_str,upload_url,token){
        var pic = base64_str,
            url = upload_url,
            xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function (){
          if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
              var img = JSON.parse(xhr.responseText),
                  Imgsrc = '你七牛存储空间的自定义域名或者当前所绑定的域名' + img.key;

              markdown_IMG(Imgsrc);
          }
        };
        xhr.open("POST",url,true);
        xhr.setRequestHeader("Content-Type", "application/octet-stream");
        xhr.setRequestHeader("Authorization",'UpToken' + ' ' + token);
        xhr.send(pic);
     }

     // 获取token
     Ajax.init({
       url: '/getToken',
       method: 'get',
       datatype: 'json',
       success: function (result){

       base64_str = base64_str.replace(/^data:image\/\w+;base64,/, '');

       // 根据七牛开发文档描述，当前目的存储空间位置不同(华南、华北、北美)，'*****'对应值不同
       // 根据需要自行更改
       upload_url = 'http://*******.qiniu.com/putb64/' + imageFile.size;
       result = JSON.parse(result);
       upToken = result.token;
       // 上传文件
       upload_base64(base64_str,upload_url,upToken);
     }

但是使用客户端直传在这个项目中存在一个问题，就是还未对后端返回的token做一个加密操作，暂且token是明文的，但是流程是正确的，只需对token做一个加密，在发起上传操作时，对其解密即可，这样就不会出现token泄露或者被截获，当然，这只是我目前想到的解决办法，如果有更合适的办法或者哪里有错误，欢迎指正以及PR