如何通过前端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 值,即为你图片上传到七牛的路径

评论() 相关

收藏

赞

hoochon

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。