layui结合阿里云OSS实现图片上传

场景：微信用户图片上传使用第三方阿里云存储，方便系统的运行和节省系统的空间

1.购买阿里云OSS服务，详情请查看我的另外一篇博客

2.layui前端代码

<tr>
    <td class="">奖品图片:</td>
    <td class="">
        <div id="picture_path_upload">
            <input type="hidden" value="<?php echo $_result['prize']['img_src'];?>" name="img_src" id="img_src">
        </div>
        <div id="picture_path_pic">
            <img src="<?php echo $_result['prize']['img_src'];?>" width="100px" alt=""/>
        </div>
        <span>建议尺寸640*640</span>
    </td>
</tr>

//js代码
<script type="text/javascript" src="<?php echo CDNURL;?>/source/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="<?php echo CDNURL;?>/source/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<?php echo CDNURL;?>/source/admin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="<?php echo CDNURL;?>/source/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="<?php echo CDNURL;?>/source/common/uploadify/jquery.Huploadify.js"></script>
<script type="text/javascript">
    function article_save()
    {
        alert("刷新父级的时候会自动关闭弹层。");
        window.parent.location.reload();
    }

    $(function(){

        $("#prize_type").change(function()
        {
            if ($(this).val()==4)
            {
                $("#coupon_type").show();
            }else
            {
                $("#coupon_type").hide();
            }
        })

        $("#checkform").validate({
            rules:{
                prize_tag: {
                    required:true
                },
                prize_type: {
                    required:true
                },
                prize_point: {
                    number:true
                },
                prize_count: {
                    number:true
                }
            },
            messages:{
                prize_tag:{
                    required:"请输入奖品名称"
                },
                prize_type: {
                    required:"请输入奖品类型"
                },
                prize_point: {
                    number:"积分必须为数字"
                },
                prize_count: {
                    number:"数量必须为数字"
                }
            }
        })


        $('#picture_path_upload').Huploadify({
            auto:true,
            fileTypeExts:'*.jpg;*.png',
            multi:true,
            formData:{key:123456,key2:'vvvv'},
            fileSizeLimit:9999,
            showUploadedPercent:true,//是否实时显示上传的百分比，如20%
            showUploadedSize:true,
            removeTimeout:9999999,
            uploader:'?mod=admin&v_mod=upload&_action=ActionLoadUpload',
            onUploadStart:function(){
                //alert('开始上传');
            },
            onInit:function(){
                //alert('初始化');
            },
            onUploadComplete:function(){
                //alert('上传完成');
            },
            onDelete:function(file){
                console.log('删除的文件：'+file);
                console.log(file);
            },
            'onUploadSuccess':function(file,res,response)
            {
                var result = $.parseJSON(res);
                layer.msg(result.msg, {icon:result.code==0?6:5,time:1000});
                if(result.code==0)
                {
                    $("#img_src").val(result.file);
                    $("#picture_path_pic").empty();
                    $("#picture_path_pic").append('<img src="'+result.file+'" width="100" height="100" class="thumbnail"/>')
                }
            }
        });

    });

    <?php
    if(isset($_return))
    {
    ?>
    alert('<?php echo $_return['msg']; ?>');
    if('<?php echo $_return['code']?>'==0)
    {
        //var index = parent.layer.getFrameIndex(window.name);
        //parent.layer.close(index);
    }
    <?php
    }
    ?>
</script>

后端处理代码

1.引入相应的OSS工具sdk

<?php
namespace Ry\ykl\admin\Action;
use Ry\ykl\admin\upload;
defined('SAVE_IMG_LARGER') or define('SAVE_IMG_LARGER','upload/larger');  //阿里云上面的OSS路径
require_once RPC_DIR  . '/tool/oss/index/oss_Common.php';  //引入OSS工具sdk
use oss_Common;
class UploadAction extends upload
{
    function __construct($data)
    {
        parent::__construct($data);
    }

    //更新图片
    public function upload_pic($files,$tosrc,$web)
    {
        //支持的图片类型
        $imageArray = array('image/gif','image/gif', 'image/jpeg', 'image/png', 'image/bmp');
        if (is_uploaded_file($files['tmp_name']))
        {
            if($files['error']== 0 &&
                $files['size'] > 0 &&
                $files['size'] < 100 * 1024 * 1024)
            {
                $extArray = explode('.',$files['name']);
                $fileExt = $extArray[count($extArray) -1];
                $filename = md5(time()) .rand(11,99). '.' . $fileExt;
                //$filename此处随机文件名
                if(move_uploaded_file($files['tmp_name'], $tosrc.$filename))
                {
                    //成功,返回完整的图片地址
                    return  $web.$filename;
                }
                return false;
            }
            return false;
        }
        return false;
    }


    //执行上传
    public function ActionLoadUpload()
    {
        if(!isset($_FILES['file']) || empty($_FILES['file']['tmp_name']) || $_FILES['file']['error']!=0)
        {
            return array('code'=>1,'msg'=>'请选择正确的图片');
        }

        oss_Common::createBucket();
//        return['code'=>0,'msg'=>'y'];
        $bucketName = oss_Common::getBucketName();
        $ossClient = oss_Common::getOssClient();
        $filePath = __FILE__;
        $_return=$ossClient->uploadFile($bucketName,SAVE_IMG_LARGER.'/games_wheel/'.time().'.png',$_FILES['file']['tmp_name']);
        $file='';
        if (!empty($_return['oss-request-url']))
        {
            //正则表达式
            $reg = '/(http):\/\/([^\/]+)/i';
            preg_match($reg,$_return['oss-request-url'],$res);
            $file=preg_replace($reg,SOURCE_URL,$_return['oss-request-url']);
        }
        if($file=='')
        {
            return array('code'=>1,'msg'=>'上传失败');
        }
        return array('code'=>0,'msg'=>'上传成功','file'=>$file);
    }

    protected function uploadFile()
    {
        //表单上传
        if (!is_uploaded_file($_FILES['file']['tmp_name'])){
            return array('code'=>1,'msg'=>'上传内容为空');
        }
        $allow_type = array('image/gif', 'image/gif','image/jpg', 'image/jpeg', 'image/png', 'image/bmp');
        if (!isset($_FILES['file']['type']) || !in_array(strtolower($_FILES['file']['type']),$allow_type)){
            return array('code'=>1,'msg'=>'上传类型不合法,'.$_FILES['file']['type']);
        }
        if ($_FILES['file']['error'] > 0 || $_FILES['file']['size'] > 1024 * 1024 * 5){
            return array('code'=>1,'msg'=>'图片错误或者超过5M大小');
        }
        if (empty($this->data['file_dir'])){
            return ReturnError('上传路径错误');
        }
        $oss_path = SAVE_IMG_LARGER.'/'.trim($this->data['file_dir']).'/'.md5($_FILES['file']['name']).'.png';
        return $this->saveToOss($_FILES['file']['tmp_name'],$oss_path);
    }

    /**
     * 上传文件到OSS存储
     * @param $source :本地文件，如$_FILES['file']['tmp_name']
     * @param $toPath :阿里云oss保存的位置,地址开头不能带有‘/’，正确路径：“img/abc/xxx.jpg”
     * @return array
     */
    private function saveToOss($source_file,$toOssPath)
    {
        oss_Common::createBucket();
        $bucketName = oss_Common::getBucketName();
        $ossClient = oss_Common::getOssClient();
        $_return=$ossClient->uploadFile($bucketName,$toOssPath,$source_file);
        $file='';
        if (!empty($_return['oss-request-url'])){
            //正则表达式
            $reg = '/(http):\/\/([^\/]+)/i';
            preg_match($reg,$_return['oss-request-url'],$res);
            $file = preg_replace($reg,SOURCE_URL,$_return['oss-request-url']);
        }
        if(empty($file)){
            return array('code'=>1,'msg'=>'上传失败');
        }
        return array('code'=>0,'msg'=>'上传成功','url'=>$file);
    }
}