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="width: 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(Requests\UploadAvatarRequest $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數組中添加：

Intervention\Image\ImageServiceProvider::class

在alias數組中添加：

'Image' => Intervention\Image\Facades\Image::class

生成配置文件：

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

至於爲什麼生成配置文件請看官網的解釋：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(Requests\UploadAvatarRequest $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');
    }