七牛云的使用

七牛云官网：https://www.qiniu.com/

七牛云开发者中心：https://developer.qiniu.com/（有官方SDK、社区SDK、开发者工具、社区插件）

手册：https://developer.qiniu.com/kodo/manual/1277/product-introduction

 

 

申请成功之后的使用：

步骤一：点击对象存储 - 新建存储空间zhongjun

步骤二：新建加速域名：

1）加速域名命名为cdn.zhongjun.windyet.com，

2）源站配置选择里面步骤一里面创建的zhongjun，如下：

 

 

步骤三：去阿里云后台解析域名：cdn.zhongjun.windyet.com，选择CNAME的方式，记录值为七牛云的分配的值。：

1）七牛云的信息：

2）阿里云的配置：

 

步骤四：等到七牛云对象存储的融合CDN域名加速显示成功，就可以使用了。

 

步骤五：进行测试。存储空间 - 内容管理 - 上传文件，然后上传一张图片，并使用cdn.zhongjun.windyet.com/images/1.jpg进行访问。能够访问图片。

 

步骤六：单图上传和ueditor的使用。请参考文章：ueditor的使用。

 

 

上传的基础知识：当你创建的空间在不同的区域的时候，你的上传地址得填入不同的。

客户端上传流程：先从服务器获取凭证，然后依据凭证去七牛云上传资源。

客户端下载资源：公开的不需要凭证，私有的需要从服务器获取凭证。(AK/SK只存在服务端上。)

 

 

 

—————接下来，我们要实现从客户端直接上传单张图片到七牛云并返回地址的功能：—————

1、执行

composer require qiniu/php-sdk

——获取七牛的php-sdk，

 

2、后端执行以下代码生成upToken，并返回：

<?php

namespace app\admin\controller;

use think\Controller;
use \Qiniu\Auth;

require VENDOR_PATH . 'qiniu/php-sdk/autoload.php';

class Test extends Controller
{

    public function getToken()
    {
        $auth = new Auth(config('qiniu.accessKey'), config('qiniu.secretKey'));
        $upToken = $auth->uploadToken(config('qiniu.bucket'));
        return json(['uptoken'=>$upToken]);
    }

}

 

————其中accessKey和secretKey都直接在配置文件里面设置

 

 

 

3、下载前端使用的js-sdk，访问：https://github.com/qiniu/js-sdk/获得：

html部分：

<div id="container">
    <a class="btn btn-default btn-lg " id="pickfiles" href="">
        <i class="glyphicon glyphicon-plus"></i>
        <span>选择文件</span>
    </a>
</div>
<div class="img">
    <img style="width: 300px;" src="" alt="">
</div>

JS部分：

<!--JS部分-->
{block name="script"}
<script src="__COMMON__/qiniu-js-sdk/src/plupload/moxie.js"></script>
<script src="__COMMON__/qiniu-js-sdk/src/plupload/plupload.dev.js"></script>
<script src="__COMMON__/qiniu-js-sdk/dist/qiniu.min.js"></script>

<script>
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
        uptoken_url: "/admin/test/gettoken",       //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        // uptoken : '<Your upload token>', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
        domain: '{$cdnUrl}',   //bucket 域名，下载资源时用到，**必需**
//        domain: 'http://qiniu-plupload.qiniudn.com/',   //bucket 域名，下载资源时用到，**必需**（暂时不需要下载资源）
        get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
        container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '100mb',           //最大文件体积限制
        flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function (up, files) {
                plupload.each(files, function (file) {
                    // 文件添加进队列后,处理相关的事情
                });
            },
            'BeforeUpload': function (up, file) {
                // 每个文件上传前,处理相关的事情
            },
            'UploadProgress': function(up, file) {
                // 每个文件上传时,处理相关的事情
                $('#pickfiles').prop('disabled', true).html('图片上传中...');
            },
            'FileUploaded': function(up, file, info) {
                // 每个文件上传成功后,处理相关的事情
                // 其中 info.response 是文件上传成功后，服务端返回的json，形式如
                // {
                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                //    "key": "gogopher.jpg"
                //  }
                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                $('#pickfiles').prop('disabled', false).html('上传图片');
                var domain = up.getOption('domain');
                var res = JSON.parse(info.response);
                var sourceLink = domain + res.key; //获取上传成功后的文件的Url
//                alert(sourceLink);
                $('.img img')[0].src = sourceLink;
            },
            'Error': function(up, err, errTip) {
                //上传出错时,处理相关的事情
                $('#pickfiles').prop('disabled', false).html('上传图片');
                layer.alert('出错了！');
            },
            'UploadComplete': function () {
                //队列文件处理完毕后,处理相关的事情
            },
            'Key': function (up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效

                var key = "";
                // do something with key here
                return key
            }
        }
    });
</script>

{/block}

 

 

 

以下为完整的例子：添加活动：前端界面的示例：

{extend name="base" /}

<!--右侧主区域-->
{block name="main"}
<div class="row">
    <div class="col-sm-offset-2 col-sm-8">
        <div class="form-group">
            <label for="">活动标题:</label>
            <input type="text" class="form-control title" value="">
        </div>
        <div id="container">
            <a class="btn btn-primary" id="pickfiles" href="">
                <!--<i class="glyphicon glyphicon-plus"></i>-->
                <span>上传封面图</span>
            </a>（宽高比：7:3）
        </div>
        <div class="img">
            <img style="width: 300px;" calss="cover-img-url" src="" alt="">
        </div>
        <div class="form-group">
            <label for="">活动简介：</label>
            <input type="text" class="form-control summary" value="">
        </div>
        <div class="form-group">
            <label for="">文章正文：</label>
            <!--可以在以下直接填充初始化内容-->
            <script id="ueditor" name="content" class="content" type="text/plain"></script>
            <!-- 配置文件 -->
            <script type="text/javascript" src="/static/common/qiniu_ueditor_1.4.3-master/ueditor.config.js"></script>
            <!-- 编辑器源码文件 -->
            <script type="text/javascript" src="/static/common/qiniu_ueditor_1.4.3-master/ueditor.all.js"></script>
            <!-- 实例化编辑器 -->
            <script type="text/javascript">
                var ue = UE.getEditor('ueditor');
            </script>
        </div>
        <div class="form-group">
            <label for="">备注：</label>
            <input type="text" class="form-control mark" value="">
        </div>

        <button class="btn btn-primary submit">确认添加</button>
    </div>
</div>
{/block}

<!--JS部分-->
{block name="script"}
<script src="__COMMON__/qiniu-js-sdk/src/plupload/moxie.js"></script>
<script src="__COMMON__/qiniu-js-sdk/src/plupload/plupload.dev.js"></script>
<script src="__COMMON__/qiniu-js-sdk/dist/qiniu.min.js"></script>
<script>
    //单图（封面图）上传的设置
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
        uptoken_url: "/admin/qiniu/gettoken",       //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        // uptoken : '<Your upload token>', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
        domain: '{$cdnUrl}',   //bucket 域名，下载资源时用到，**必需**
        //domain: 'http://qiniu-plupload.qiniudn.com/',   //bucket 域名，下载资源时用到，**必需**
        get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
        container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '100mb',           //最大文件体积限制
        flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function (up, files) {
                plupload.each(files, function (file) {
                    // 文件添加进队列后,处理相关的事情
                });
            },
            'BeforeUpload': function (up, file) {
                // 每个文件上传前,处理相关的事情
            },
            'UploadProgress': function (up, file) {
                // 每个文件上传时,处理相关的事情
                $('#pickfiles').prop('disabled', true).html('图片上传中...');
            },
            'FileUploaded': function (up, file, info) {
                // 每个文件上传成功后,处理相关的事情
                // 其中 info.response 是文件上传成功后，服务端返回的json，形式如
                // {
                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                //    "key": "gogopher.jpg"
                //  }
                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                $('#pickfiles').prop('disabled', false).html('更改封面图');
                var domain = up.getOption('domain');
                var res = JSON.parse(info.response);
                var sourceLink = domain + res.key; //获取上传成功后的文件的Url
//                alert(sourceLink);
                $('.img img')[0].src = sourceLink;
            },
            'Error': function (up, err, errTip) {
                //上传出错时,处理相关的事情
                $('#pickfiles').prop('disabled', false).html('上传封面图');
                layer.alert('出错了！');
            },
            'UploadComplete': function () {
                //队列文件处理完毕后,处理相关的事情
            },
            'Key': function (up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效

                var key = "";
                // do something with key here
                return key
            }
        }
    });

    $('.submit').click(function () {
        var title = $('.title').val();
        var coverImgUrl = $('.img img')[0].src;
        var summary = $('.summary').val();
        var content = UE.getEditor('ueditor').getContent();
        var mark = $('.mark').val();
        if(mark.length > 4){
            layer.alert('标注超过4个汉字');
            return false;
        }
        $.ajax({
            type: "POST",
            url: "{:url('admin/activity/activityAdd')}",
            data: {
                title: title,
                cover_img_url: coverImgUrl,
                summary: summary,
                content: content,
                mark: mark,
            },
            dataType: "json",
            timeout: 3000,
            success: function (data) {
                if (data == 'success') {
                    layer.alert('添加文章成功！', function(){
                        window.location.href = "{:url('admin/activity/activityList')}";
                    });
                }else {
                    layer.alert('添加失败！');
                }
            }
        });
    })

</script>
{/block}

 

 

 

 

 

——————————web前端使用七牛云直传————————

html部分

<!--图片区域-->
<div class="input-bg" style="text-align: left;">
    <div id="upimg-title">上传图片</div>
    <div class="photo-list weui-row">
        <!--插入图片的实例-->
        <!--<div class="photo-frame">-->
            <!--<img class="photo" src="http://cdn.zhongjun.windyet.com/o_1c1uma3vuou21ooi1e5hjqhqmdc.jpg" alt="">-->
            <!--<span class="weui-icon-cancel del"></span>-->
        <!--</div>-->
        <div class="photo-frame" id="container">
            <img id="pickfiles" src="/static/common/images/add.png"/>
        </div>
    </div>
</div>
<!--图片区域结束-->

JS部分：

<!--直传到七牛云开始-->
<script src="__COMMON__/qiniu-js-sdk/src/plupload/moxie.js"></script>
<script src="__COMMON__/qiniu-js-sdk/src/plupload/plupload.dev.js"></script>
<script src="__COMMON__/qiniu-js-sdk/dist/qiniu.min.js"></script>
<script>
    var arr = [];
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
        uptoken_url: "/admin/qiniu/gettoken",       //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
        domain: '{$cdnUrl}',   //bucket 域名，下载资源时用到，**必需**
        get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
        container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '100mb',           //最大文件体积限制
        flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function (up, files) {
                plupload.each(files, function (file) {
                    // 文件添加进队列后,处理相关的事情
                });
            },

            'BeforeUpload': function (up, file) {
                // 每个文件上传前,处理相关的事情
            },

            'UploadProgress': function (up, file) {
                // 每个文件上传时,处理相关的事情
//                $('#pickfiles').prop('disabled', true).html('图片上传中...');
            },

            'FileUploaded': function (up, file, info) {
                // 每个文件上传成功后,处理相关的事情
                // 其中 info.response 是文件上传成功后，服务端返回的json
                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                $('#pickfiles').prop('disabled', false).html('上传图片');
                var domain = up.getOption('domain');
                var res = JSON.parse(info.response);
                var sourceLink = domain + res.key; //获取上传成功后的文件的Url
                $('.photo-list').prepend('<div class="photo-frame"><img class="photo" src="' + sourceLink + '" alt=""><span class="weui-icon-cancel del"></span></div>');
            },

            'Error': function (up, err, errTip) {
                //上传出错时,处理相关的事情
                $('#pickfiles').prop('disabled', false).html('上传图片');
                $.alert('出错了！');
            },

            'UploadComplete': function () {
                //队列文件处理完毕后,处理相关的事情
            },

            'Key': function (up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效

                var key = "";
                // do something with key here
                return key
            }
        }
    });
</script>

 

 

 

 

——————不使用插件，直接使用表单直传（ajax或表单提交都可以） ——————

 html部分

<form id="uploadForm" enctype="multipart/form-data">
    <input name="token" class="token" type="hidden" value="">
    <input name="file" type="file" />
</form>
<button id="upload">上传文件</button>

JS部分：<= 演示ajax部分，其实可以直接表单提交的。

// 获取七牛云token，并放入input框中
$.ajax({
    type: "GET",
    url: "{{:url('/backend/qiniu/get_token')}}",
    data: {
    },
    success: function (res) {
        console.log(res);
        $('.token').val(res);
    }
});

// 模拟上传
$("#upload").click(function () {
    var formData = new FormData($('#uploadForm')[0]);
    alert(222);
    $.ajax({
        type: 'post',
        url: "http://upload.qiniup.com/",
        data: formData,
        success: function (res) {
            console.log(res);
//                console.log('http://cdn.smartcommunity.windyet.com/'+res.key);
        }
    })
});

————返回值有个hash和key，域名+key就是图片的地址了。

 

 

 

————占位符