如何使用ThinkPHP3.2上传图片到七牛云

我们在做大型商城项目或者其他项目的时候，上传图片肯定是必不可少的，以前的项目都是把图片上传到本地，针对于图片量比较大的商城，很多企业要求把图片上传到第三方网站，比如七牛云等。这样可以大大加快网站的加载速度。那么，如何在ThinkPHP3.2框架中使用七牛云呢，接下来我们来分析详细操作步骤。

一、首先进入七牛云官网 https://www.qiniu.com/ 注册账号，登录后进入 管理控制台--对象存储--新建存储空间 即可，个人中心需要实名认证。接下来，我们就可以开始了。
二、找到 文档中心--SDK&工具--官方SDK--PHP服务端--文档 进入PHP七牛文档。找到安装，如何安装，简单介绍一下：

1. MAC电脑终端自带composer，无需安装，所以直接打开终端进入项目跑命令：composer require qiniu/php-sdk安装即可。
2. 如果是Windows电脑，在使用WAMP集成环境的基础上，进入composer中国镜像官网，找到 Download,下载最新版composer安装包，下载地址：http://docs.phpcomposer.com/00-intro.html#Using-the-Installer下载后安装即可。安装完成后，命令行执行composer -v 查看是否安装成功。再安装 composer中国镜像，win+R快捷键打开命令行,执行安装命令 composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/。

三、直接上代码

1、接下来在项目的入口文件中添加如下代码：require './vendor/autoload.php'; 注意位置不要放错了

// 定义应用目录
define('APP_PATH', './Application/');

//引入七牛
require './vendor/autoload.php';

// 引入ThinkPHP入口文件
require './ThinkPHP/ThinkPHP.php';

// 亲^_^ 后面不需要任何代码了 就是如此简单

2、引入上传图片插件，我这里使用Bootstrap.Huploadify v2.1，下载bootstrapextend扩展包放在
public/vendor文件夹，在模板中引用里面的bootsrap.extend.js文件，代码如下

<script src="__PUBLIC__/vendor/bootstrapextend/js/bootstrap.extend.js"></script>

3、给上传图片按钮设置事件

<div class="am-g am-margin-top">
   <div class="am-u-sm-4 am-u-md-2 am-text-right">
        缩略图
   </div>
	<div class="am-u-sm-8 am-u-md-8 am-u-end col-end">
         <div class="am-form-group am-form-file">
            <button type="button" class="am-btn am-btn-success am-btn-sm new_thumb">
                 <i class="am-icon-cloud-upload" id="loading"></i> 上传缩略图</button>
                 <div id="upload_one" style="display: none;"></div>
                 <div id="view_one">
                      <input type="hidden" name="thumb" value="">
          		</div>
    	</div>
		<hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>
		<div>
    		<img src="" id="img_show" style="max-height: 200px;">
    	</div>
  	</div>
</div>

4、js部分写上启动插件代码

$('#upload_one').Huploadify({
    uploader: '{{:U("Admin/Uploadfile/upload")}}',
    fileTypeExts: '*.gif;*.jpg;*.jpeg;*.png;*.bmp',
    //fileSizeLimit:{:C('UPLOAD_IMAGE_SIZE')}*1024,
    buttonText: '上 传 图 片',
    onUploadComplete: function (file, data) {
        data = $.parseJSON(data);
        $('#img_show').attr('src', data.real_path);
        $('#view_one input').attr('value', data.real_path);
    }
});

5、此时到后台模块添加 UploadfileController控制器，里面创建 upload方法，并引入七牛云的鉴权类和上传类：

// 引入鉴权类
use Qiniu\Auth;
// 引入上传类
use Qiniu\Storage\UploadManager;

6、控制器中自定义七牛上传方法，填入自己七牛的key和秘钥，代码如下

function qiniu_upload($filePath)
{
    // 需要填写你的 Access Key 和 Secret Key
    $accessKey = 'you-key';
    $secretKey = 'you-secret';
    // 构建鉴权对象
    $auth = new Auth($accessKey, $secretKey);
    // 要上传的空间
    $bucket = 'you-bucket';
    // 生成上传 Token
    $token = $auth->uploadToken($bucket);
    // 上传到七牛后保存的文件名
    $key = basename($filePath);
    // 初始化 UploadManager 对象并进行文件的上传
    $uploadMgr = new UploadManager();
    // 调用 UploadManager 的 putFile 方法进行文件的上传
    $uploadMgr->putFile($token, $key, $filePath);

    //删除本地图片
    unlink($filePath);
}

7、在上传控制器中添加如下代码：

public function upload()
{
   $upload = new \Think\Upload();// 实例化上传类
   $upload->rootPath = './upload/image/'; // 设置附件上传根目录
   $upload->savePath = ''; // 设置附件上传（子）目录
   // 上传文件
   $info = $upload->upload();
   $info = $info['imgFile'];

   //上传图片到本地
		//$info['real_path'] = '/upload/image/' . $info['savepath'] .$info['savename'];
		//$this->ajaxReturn($info);

		//上传到七牛
   $filePath = getcwd() . '/upload/image/' . $info['savepath'].$info['savename'];
   $this->qiniu_upload($filePath);
   //拼接图片地址返回给前端显示
   $info['real_path'] = 'http://oi6a6qhed.bkt.clouddn.com/' .$info['savename'];
   $this->ajaxReturn($info);
 }

注意：PHP端执行上传之前，手动去项目根目录创建文件夹 upload/image

最后浏览器测试上传图片，看到如下网址说明成功！

总结：

1. 首先注册七牛云账号，新建存储空间。
2. 引入上传图片插件，写上启动代码，设置上传图片各种参数。
3. HTML模板中绑定事件
4. PHP端创建上传控制器和方法，调用ThinkPHP自带的上传类，获取前端传过来的图片信息，拼接图片本地地址返回给前端。如果是七牛，要拼接图片的全路径并调用七牛SDK返回给前端。