thinkPHP使用前端webuploader将图片上传至七牛云储存

浏览:3471 发布日期:2017/06/25 分类:用法示例 关键字: thinkphp webuploder 七牛
如何通过前端webuploder直接将图片上传至七牛云存储,现将功能实现的步骤和代码分享如下:
如何通过前端webuploder直接将图片上传至七牛云存储,现将功能实现的步骤和代码分享如下:

第一步:token生成

注:我使用的是thinkphp5框架,后台生成token的代码配置如下,其他请参考,原理基本一样.

配置文件中添加:    'ACCESSKEY' => '*************',//你的accessKey
    'SECRETKEY' => '*************',//你的secretKey
    'BUCKET' => 'files.zyglz.com',//上传的空间
控制器/方法:    public function index()
    {
            require_once APP_PATH . '/../vendor/qiniu/autoload.php';
            // 需要填写你的 Access Key 和 Secret Key
            $accessKey = config('ACCESSKEY');
            $secretKey = config('SECRETKEY');
            // 构建鉴权对象
            $auth = new QnAuth($accessKey, $secretKey);
            // 要上传的空间
            $bucket = config('BUCKET');
            $token = $auth->uploadToken($bucket);
            $this->assign('token',$token);
            return $this->fetch();
        }
    }
第二步:前段模板页面webuploder配置    var uploader = WebUploader.create({
        auto: true,
        swf: '/public/static/webuploader/Uploader.swf',
        server: "http://up-z1.qiniu.com/",
        fileNumLimit:1,
        fileSingleSizeLimit : 1024*1024,
        thumbnailWidth : 48, 
        thumbnailHeight : 48,
        pick: '#filePicker',
        fileVal:'file',
        resize: true,
        fileObjName: 'FileData',
        accept: {
            title: 'Images',
            extensions: 'jpg,jpeg,bmp,png,ico',
            mimeTypes: 'image/*'
        },
        formData: {
            token:'{$token}'//thinkphp传递过来token的值
        },
    });
第三步:上传成功

上传成功后,json返回的是图片的“hash”和“key”的值!

第四部:路径地址:

你在七牛建立的指向空间的绑定域名 + 返回的 hash 值,即为你图片上传到七牛的路径
评论( 相关
后面还有条评论,点击查看>>