tp5异步上传图片到七牛云,就是那么简单

1. 一个异步上传的插件uploadify

    在html中引入uploadify的js和css文件。 tp5中如

   

    html如下:

<link rel="stylesheet"type="text/css"href="__STATIC__/admin/uploadify/

uploadify.css" />

{load href="__STATIC__/admin/uploadify/jquery.uploadify.min.js"}

<div class="row cl"> <label class="form-label col-xs-4 col-sm-2">缩略图:</label> <div class="formControls col-xs-8 col-sm-9"> <input id="file_upload" type="file" multiple="true" > <img style="display: none" id="upload_org_code_img" src="" width="150" height="150"> <input id="file_upload_image" name="image" type="hidden" multiple="true" value=""> </div> </div>

    javascript调用代码如下:

<script>
	// 图片上传的一个文件
	swf = "__STATIC__/admin/uploadify/uploadify.swf";
	// 图片上传的接口
	image_upload_url = "{:url('image/upload')}"; //自己修改成自己的
$(function() {
	$("#file_upload").uploadify({
		'swf'             : swf,
		'uploader'        : image_upload_url,
		'buttonText'	  : '图片上传',
		'fileTypeDesc'	  : 'Image files',
		'fileObjName'     : 'file',
		'fileTypeExts'    : '*.gif; *.jpg; *.png',
        'onUploadSuccess' : function(file, data, response) {
			//console.log(file);
			//console.log(data);
			//console.log(response);
			var obj = JSON.parse(data);
			//console.log(obj);
			if(response){
				$('#upload_org_code_img').attr('src',obj.data);
				$('#file_upload_image').attr('value',obj.data);
				$('#upload_org_code_img').show();
			}
        }
	});
});


2.用七牛云存储图片封装

   对于qiniu类库的下载,一是通过composer,如果电脑中有composer,安装很快捷,

在项目根目录下php composer.phar require qiniu/php-sdk,或者composer require qiniu/php-sdk等待即可完成。

   对于电脑中没有composer的,可以直接下载提供的符合 Composer 规范的vendor 压缩包并在本地解压。解压后的内容和使用 Composer 方式获取到的内容完全一致,之后的使用方式也一致。

   或者下载源代码sdk包放在vender中,对于tp5在使用时require VENDER_PATH.'php-sdk-7.1.x/autoload.php';也可以放在随意文件目录总,只要引入就行了。

    即可。

    封装的上传类如下:

<?php
namespace app\common\lib;
// 引入鉴权类
use Qiniu\Auth;
// 引入上传类
use Qiniu\Storage\UploadManager;
//如果不是使用composer的话就需要require VENDOR_PATH.'qiniu/php-sdk-7.2/autoload.php'; 
/**
* 七牛图片上传基础类库
*/
class Upload 
{
	
	public static function image(){
		if(empty($_FILES['file']['tmp_name'])){
			exception('你提交的图片数据不合法',404);
		}
		// 图片的本地路径
		$file = $_FILES['file']['tmp_name'];
		// 换取上传图片的后缀
		// $ext = explode('.',$_FILES['file']['name'])[1];
		$pathinfo = pathinfo($_FILES['file']['name']);
		$ext = $pathinfo['extension'];
		$config = config('qiniu');
		// 构建一个鉴权对象
		$auth = new Auth($config['ak'],$config['sk']);
		// 生成上传的token
		$token = $auth->uploadToken($config['bucket']);
		// 上传到七牛后保存的文件名
		$key = date('Y').'/'.date('m').'/'.substr(md5($file),0,5).date('YmdHis').mt_rand(0,9999).'.'.$ext;

		// 初始化UploadManager类
		$uploadMgr = new UploadManager();
		list($ret,$err) = $uploadMgr->putFile($token,$key,$file);
		if($err !== null){
			return null;
		}else{
			return $key;
		}
	}
}

对于调用:(就是那么简单)

/**
     * 七牛图片上传
     * @return [type] [description]
     */
    public function upload(){
        // 捕获异常
        try{
            // 返回qiniu上的文件名
            $image = Upload::image();
        }catch(\Exception $e){
            echo json_encode(['status'=>0,'message'=>$e->getMessage()]);
        }
        // 返回给uploadify插件状态
        if($image){
            $data = [
                'status' => 1,
                'message' => 'OK',
                'data' => config('qiniu.image_url').'/'.$image,
            ];
            echo json_encode($data);exit;     
        }else{
            echo json_encode(['status'=>0,'message'=>'上传失败']);
        }
    }



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值