资源管理站

thinkPHP框架中使用前端webuploader直接将图片上传至七牛云储存

zyglz 9142 0

特别声明:本文为原创,可自由转载、引用,但需署名作者且注明文章出处,如有侵权请联系!

thinkPHP框架中使用前端webuploader直接将图片上传至七牛云储存

同样也是在网站建设中,遇到这样的问题,如何通过前端webuploder直接将图片上传至七牛云存储,现将功能实现的步骤和代码分享如下:


f7417201706062326338135.png

第一步:token生成

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

配置文件中添加:

    'ACCESSKEY' => '*************',//你的accessKey
    'SECRETKEY' => '*************',//你的secretKey
    'BUCKET' => '**********',//上传的空间

控制器/方法:

    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 值,即为你图片上传到七牛的路径

公众号

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)

icon_lol.gif2016zhh.gif2016fendou.gif2016lengh.gificon_exclaim.gif2016gg.gif2016yhh.gificon_cry.gif2016bs.gif2016qd.gif2016bz.gificon_eek.gif2016ka.gif2016zhem.gificon_confused.gif2016qq.gif2016db.gif2016jk.gif2016tuu.gif2016zk.gif2016kk.gificon_neutral.gif