欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

Laravel5.0头像上传功能实现

QQ截图20150324134225.png

该头像上传用到的flash和js为腾讯微博头像上传组件,目前网上几个头像上传组件都是收费的,300~800不等,太贵了,自己学习用,就扒了腾讯微博的。
声明:我只是学习开发使用,如果侵权我可以停止使用并删除。
Route::post('/user/profile/avatar', 'User\UserController@postavatar');

Route::get('/avatar/{id}/{size}', 'User\UserController@getavatar');


首先是路由,post是上传接口,get是头像地址,这里我引用头像地址定义为:
http://yourdomain.com/avatar/bd59e49a1f6dd0cc92aeb7acb68098e8/180


这样的格式,其中id是文件编码,size是你要引用的头像尺寸大小。

接下来是控制器:
这段是用来接收前端flash组件post过来的数据
public function postavatar()

{

    $uid = Auth::user()->id;

    if(Input::get('_ps1') == "gettmp"){

        $file = Request::file('Filedata');

        if($file->isValid()){

            $clientName = $file->getClientOriginalName();

            $tmpName = $file->getFileName();

            $realPath = $file->getRealPath();

            $extension = $file->getClientOriginalExtension();

            $mimeTye = $file->getMimeType(); 

            $newName = md5(date('ymdhis').$clientName).".".$extension;

            $path = $file->move('uploads/avatar/data/tmp',$newName); //这里是缓存文件夹,存放的是用户上传的原图,这里要返回原图地址给flash做裁切用

            return '{"result":"0","url":"' . addcslashes($path, '/') . '"}';

        }

    }

    if(Input::get('ccef') && Input::get('g_tk')){

        $fileid = md5(date('ymdhis')."aohbaixiu");  // 这里是文件名生成,时间+自定义key用md5生成

        $filename = $fileid.".jpg";

        $avatar = $GLOBALS['HTTP_RAW_POST_DATA'];

        if(empty($avatar)) $avatar = file_get_contents('php://input');

        $filepath = "uploads/avatar/data/";//这里是用户最终裁切好的头像存放目录,当然你可以按年月日目录结构来存放

        if(!file_exists($filepath)){

            mkdir($filepath,0777,true);

        }

        $file = fopen($filepath.$filename,"w");//打开文件准备写入

        fwrite($file,$avatar);//写入

        fclose($file);//关闭

        $path = "http://yourdomain.com/avatar/".$fileid."/180"; //这里返回头像引用地址,不过好像也可以不用返回,下面直接return '{"result":0}';

        User::where('id',$uid)->update(array('avatar' => $path));

        return '{"result":0,"url":"'. addcslashes($path, '/') .'"}';

    }

    return '{"result":-999,"msg":"参数错误"}';

}


这段是引用头像的:
public function getavatar($id,$size)

{

    $fileid = $id;

    $filesize = $size;

    $filepath = "http://yourdomain.com/uploads/avatar/data/".$fileid.".jpg"; 这里要先设置好jpg图片url路径

    self::imagecropper($filepath, $filesize, $filesize); //这里执行裁切缩放,我在网上找的一段代码

}


private function imagecropper($source_path, $target_width, $target_height)

{

    $source_info = getimagesize($source_path);

    $source_width  = $source_info[0];

    $source_height = $source_info[1];

    $source_mime   = $source_info['mime'];

    $source_ratio  = $source_height / $source_width;

    $target_ratio  = $target_height / $target_width;



    // 源图过高

    if ($source_ratio > $target_ratio)

    {

        $cropped_width  = $source_width;

        $cropped_height = $source_width * $target_ratio;

        $source_x = 0;

        $source_y = ($source_height - $cropped_height) / 2;

    }

    // 源图过宽

    elseif ($source_ratio < $target_ratio)

    {

        $cropped_width  = $source_height / $target_ratio;

        $cropped_height = $source_height;

        $source_x = ($source_width - $cropped_width) / 2;

        $source_y = 0;

    }

    // 源图适中

    else

    {

        $cropped_width  = $source_width;

        $cropped_height = $source_height;

        $source_x = 0;

        $source_y = 0;

    }



    switch ($source_mime)

    {

        case 'image/gif':

            $source_image = imagecreatefromgif($source_path);

            break;



        case 'image/jpeg':

            $source_image = imagecreatefromjpeg($source_path);

            break;



        case 'image/png':

            $source_image = imagecreatefrompng($source_path);

            break;



        default:

            return false;

            break;

    }

    $target_image  = imagecreatetruecolor($target_width, $target_height);

    $cropped_image = imagecreatetruecolor($cropped_width, $cropped_height);



    // 裁剪

    imagecopy($cropped_image, $source_image, 0, 0, $source_x, $source_y, $cropped_width, $cropped_height); 

    // 缩放

    imagecopyresampled($target_image, $cropped_image, 0, 0, 0, 0, $target_width, $target_height, $cropped_width, $cropped_height);



    header('Content-Type: image/jpeg');

    imagejpeg($target_image);

    imagedestroy($source_image);

    imagedestroy($target_image);

    imagedestroy($cropped_image);

}


前端HTML:
<div id="head">

                                                        <div id="cutphoto" class="head cutphoto" style="width: 650px;height: 580px;padding:0;"></div>

                                                    </div>


前端JS:
_token = {{time()}};

_uidurl = "{{ Auth::user()->avatar }}";

_tmpurl = "{{ url('/user/profile/avatar') }}";

_imgurl = "{{ url('/user/profile/avatar') }}";

_gid = {{Auth::user()->gid}};


uploads/avatar/plugin/avatar.js
var cutPhotoJs = function() {

return {

    initSystems : function() {

        var soCut = new SWFObject("uploads/avatar/plugin/avatar.swf", "qqminiblog", "100%", "100%", "9.0.28", "#FFFFFF");

            soCut.addParam("allowNetworking", "all");

            soCut.addParam("allowScriptAccess", "sameDomain");

            soCut.addParam("allowFullScreen", "true");

            soCut.addParam("scale", "noscale");

            soCut.addParam("wmode", "transparent");

            soCut.addVariable("wbVipWhite", "true");

            soCut.addVariable("uidurl", _uidurl+"?cache="+Math.random());

            soCut.addVariable("tmpurl", _tmpurl);

            soCut.addVariable("tmpimgurl", "noavatar_big.gif");

            soCut.addVariable("imgurl", _imgurl);

            soCut.addVariable("langver", "zh_CN");

            soCut.addVariable("token", _token);

            soCut.addVariable("_ps1", "gettmp");

            soCut.addVariable("_ps2", "null");

            soCut.addVariable("xmlurl", "uploads/avatar/plugin/picdata.xml");

            soCut.addVariable("headpretty", "true");

            soCut.write("cutphoto");

    },

    uploadFileError : function(type, code) {

        if ( type == 'filesize')

        {

            alert('文件大小不超过2M');

        }

        else if ( type == 'filename')

        {

            alert('请选择jpg、jpeg、gif、png格式的图片');

        }

    },

    uploadingError : function(ecode) {

        alert('似乎发生了一点点意外。请稍后重试');

    },

    uploadingSucess : function(scode) {

    },

    uploadedError : function(ecode) {

        if (ecode == '-1')

        {

            alert('请选择jpg、jpeg、gif、png格式的图片');

        }

        else if (ecode == '-2')

        {

            alert('文件大小不超过2M');

        }

        else if (ecode == '-3')

        {

            alert('您的登录状态消失,请重新登录');

            window.location.reload();

        }

        else

        {

            alert('似乎发生了一点点意外,请稍后重试');

        }

    },

    uploadedSucess : function(scode,type) {

        alert("您的头像已修改成功!");

        window.location.reload();

    },

    cancelProgramm: function() {

        window.location.reload();

    }

}

}();



function isCanUseCustomHead(){

if(_gid == 1){

    return 1;

}else{

    return 0;

}

}

function adjustFlashHeigh(v){

$('cutphoto').style.height = v + 'px';

if($("qqminiblog"))

{

    $('qqminiblog').style.height = v + 'px';

}

}

function dispatchAS3Method(v,param){

if (v == 'error_use_custom_head'){

    var WBvipWhite = 1;

    if(WBvipWhite == 1){

        alert('您当前的用户组无法保存相框效果('+param+') ');

    }else{

        alert('您当前的用户组无法保存相框效果('+param+') ');

    }

}

}


引用完avatar.js后要:
cutPhotoJs.initSystems();

如果有不明白的地方可以留言,如果我懂的地方肯定会为大家解答的。
其实我也是菜鸟一只,刚学laravel,还请大神们多多关照,源码有问题的地方还请大神们指出。

另外,哪位大神可以给一份laravel的图片验证码?
 
 8
 分享 2015-03-24

11 个评论

萧晔离

萧晔离

忘了一个东西,补充下,引用avatar.js后要cutPhotoJs.initSystems();
2015-03-24 13:57
levi

levi

收藏了
2015-03-24 14:04
娃娃脾气

娃娃脾气

这也太复杂了吧!!!!
2015-03-25 09:52
jonnyRain

guoyuangang

怎么用啊
2015-03-25 16:02
keang1013

keang1013

您好,有空麻烦看下我这里的问题,谢谢!http://wenda.golaravel.com/question/724
2015-03-25 23:06
未育龙年各类

未育龙年各类

你这个有是用file 上传的吗?你知道jqGrid 怎么上传吗?
2015-04-25 09:07
zhuowei

zhuowei

怎么使用哇,能详细说明一下吗
2015-10-24 10:37
jonnyRain

kingkong

收藏不了 晕
2015-11-16 23:49
回风

回风

刚好要做头像功能,谢谢啦
2016-03-04 18:08
流浪的安生

流浪的安生

好难啊
2017-03-13 11:18
流浪的安生

流浪的安生

上传头像给app的接口怎么写啊
来自  http://wenda.golaravel.com/article/252
普通分类: