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

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

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

第一步：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 值，即为你图片上传到七牛的路径

赏