拥抱云计算——七牛云图床

本着开源节流，增强用户体验的原则，我们公司在我的坑蒙拐骗下，决定用七牛云做图片，拥抱云计算啦。（最后会附源码哦~）

踩点

还是老一套，要做一件没有做过的事情，我们先踩踩点。

七牛云对开发者非常的友好，可以在开发者中心找到SDK。

这边巴拉巴拉讲了很多，主要看了一下java和js的SDK，我们选择用javascript上传图片，首先要获取一个token。

获取token

java 后台代码

/**
  * 获取token
  * @Title: upToken
  * @author: Glacier
  * @return: void
  */
public void upToken() {
  Map<String, Object> resultMap = new HashMap<>();
  String token = QianNiuUpload.getUpToken();
  resultMap.put("uptoken",token);
  renderJson(resultMap);
}

public class QianNiuUpload {
    //设置好账号的ACCESS_KEY和SECRET_KEY
    public static String ACCESS_KEY = "eohGef*****";
    public static String SECRET_KEY = "E2G*******0";
    //要上传的空间名称
    public static String bucketname = "g***";

    //密钥配置
    public static Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);

    //简单上传，使用默认策略，只需要设置上传的空间名就可以了
    public static String getUpToken() {
        return auth.uploadToken(bucketname);
    }

}

整理了一下用到的jar包，可以点击这里下载。

上传图片

导入前端需要用到的包

<!--别忘了jquery-->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!--七牛云组件-->
<script type="text/javascript" src="./qianniuJs/js/qiniu.js"></script>
<script type="text/javascript" src="./qianniuJs/js/moxie.js"></script>
<script type="text/javascript" src="./qianniuJs/js/plupload.dev.js"></script>

页面加载完毕 发起请求获取token

function getTokenMessage() {
    $.ajax({
        url: '/upToken',
        type: 'POST',
        data: {},
        cache: false,
        contentType: false,    //不可缺
        processData: false,    //不可缺
        dataType : 'json',
        success: function (data) {
          var obj = data;
          uploaderReady(obj.uptoken);
        }
    });
  }

$(document).ready(function(){
      getTokenMessage();
});

上传图片

function uploaderReady(token){
  var uploader = Qiniu.uploader({
      runtimes: 'html5,flash,html4',
      browse_button: 'pickfiles',     //上传按钮的ID
      container: 'btn-uploader',      //上传按钮的上级元素ID
      drop_element: 'btn-uploader',
      max_file_size: '100mb',         //最大文件限制
      flash_swf_url: '/static/js/plupload/Moxie.swf',
      dragdrop: false,
      chunk_size: '4mb',              //分块大小
      uptoken: token,                 //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
      domain: 'http://xxxxxxxxxxx.com/',    //自己的七牛云存储空间域名
      multi_selection: false,         //是否允许同时选择多文件
      filters: {
          mime_types: [               //文件类型过滤，这里限制为图片类型
            {title: "Image files", extensions: "jpg,jpeg,gif,png"}
          ]
    },
    auto_start: true,
    unique_names :true,             //自动生成文件名,如果值为false则保留原文件名上传
    init: {
      'FilesAdded': function (up, files) {
          plupload.each(files, function(file) {
            // 文件添加进队列后，处理相关的事情
          });
      },
      'BeforeUpload': function (up, file) {
        // 每个文件上传前，处理相关的事情
      },
      'UploadProgress': function (up, file) {
        //文件上传时，处理相关的事情

        //上传进度 class="layui-btn" type="button"
        $('#qiniupercent').attr('style','width:'+file.percent+'%');
      },
      'UploadComplete': function () {
      },
      'FileUploaded': function (up, file, info) {
          //每个文件上传成功后,处理相关的事情
          //其中 info 是文件上传成功后，服务端返回的json，形式如
          //{
          //  "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
          //  "key": "gogopher.jpg"
          //}

          var domain = up.getOption('domain');
          var data = eval('(' + info.response + ')');   
          var imgurl = domain + data.key  

          console.log(imgurl)
         // 返回的这个imgurl 是图片的链接
          $('#img_div').append("<img class='upload_img' src='"+ imgurl +"'/>")
      },
      'Error': function (up, err, errTip) {
        alert(errTip);
      },
      'Key': function (up, file) {
        //当save_key和unique_names设为false时，该方法将被调用
        var key = "";
        $.ajax({
              url: '/qiniu-token/get-key/',
              type: 'GET',
              async: false,//这里应设置为同步的方式
              success: function (data) {
                var ext = Qiniu.getFileExtension(file.name);
                key = data + '.' + ext;
              },
              cache: false
          });
          return key;
      }
    }
  });
  uploader.start();
}

效果

打完收工！

原文链接：https://glacierbo.github.io/2017/11/08/qiniu/#more