Laravel5.1 搭建简单的社区（十一）--上传头像

上一篇文章中新增的下拉列表中有上传头像的链接，这篇文章就来实现这个功能

首先注册一条展示上传头像页面的路由：

// 上传头像
Route::get('/user/avatar', 'UsersController@avatar');

在UsersController中新增方法：

    public function avatar()
    {
        return view('user.avatar');
    }

创建avatar.blade.php：

@extends('app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center">
                    <img src="{{ Auth::user()->avatar }}" class="img-circle" style=" 150px;height: 150px;" alt="">
                    {{--上传头像表单--}}
                    {!! Form::open(['method'=>'post','url'=>'/user/avatar', 'files'=>true]) !!}
                    {{--Avatar 上传--}}
                    {!! Form::file('avatar') !!}
                    <!-- 提交 -->
                    {!! Form::submit('更换头像',['class' => 'btn btn-primary pull-right']) !!}
                </div>
            </div>
            <div class="col-md-6 col-md-offset-3">
                @if($errors->any())
                    <ul class="list-group">
                        @foreach($errors->all() as $error)
                            <li class="list-group-item list-group-item-danger">{{ $error }}</li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
@stop

创建request:

php artisan make:request UploadAvatarRequest

    public function rules()
    {
        return [
            'avatar' => 'required'
        ];
    }

注册保存图片的路由：

Route::post('/user/avatar', 'UsersController@changeAvatar');

在控制器中实现方法：

    public function changeAvatar(RequestsUploadAvatarRequest $request)
    {
        // 声明路径名
        $destinationPath = 'uploads/';
        // 取到图片
        $file = $request->file('avatar');
        // 获得图片的名称 为了保证不重复 我们加上userid和time
        $file_name = Auth::user()->id . '_' . time() . $file->getClientOriginalName();
        // 执行move方法
        $file->move($destinationPath, $file_name);

        // 保存到User
        $user = User::findOrFail(Auth::user()->id);
        $user->avatar = '/' . $destinationPath . $file_name;
        $user->save();
        // 重定向
        return redirect('/user/avatar');
    }

处理图片

现在我们的上传头像逻辑已经实现完毕，但是上传的头像实在是太大了，我们需要对用户上传的头像做一些处理。

推荐使用一个package：intervention/image。它是一个图片的处理包，下面来引入到项目中：

composer require intervention/image

引入后需要做一些配置，官网中写的很详细：http://image.intervention.io/

打开config/app.php，在provider数组中添加：

InterventionImageImageServiceProvider::class

在alias数组中添加：

'Image' => InterventionImageFacadesImage::class

生成配置文件：

php artisan vendor:publish --provider="InterventionImageImageServiceProviderLaravel5"

至于为何生成配置文件请看官网的解释：By default Intervention Image uses PHP's GD library extension to process all images. If you want to switch to Imagick, you can pull a configuration file into your application by running on of the following artisan command.

我们使用默认的gd driver就好。

都配置好后开始处理用户上传的图片，在UsersController中修改方法：

    public function changeAvatar(RequestsUploadAvatarRequest $request)
    {
        // 声明路径名
        $destinationPath = 'uploads/';
        // 取到图片
        $file = $request->file('avatar');
        // 获得图片的名称 为了保证不重复 我们加上userid和time
        $file_name = Auth::user()->id . '_' . time() . $file->getClientOriginalName();
        // 执行move方法
        $file->move($destinationPath, $file_name);

        // 裁剪图片 生成200x200的缩略图
        Image::make($destinationPath . $file_name)->fit(200)->save();
        // 保存到User
        $user = User::findOrFail(Auth::user()->id);
        $user->avatar = '/' . $destinationPath . $file_name;
        $user->save();
        // 重定向
        return redirect('/user/avatar');
    }