美文网首页程序员Laravel开发实践
如何在 Laravel 项目中轻松实现上传头像功能?

如何在 Laravel 项目中轻松实现上传头像功能?

作者: SevDot | 来源:发表于2018-09-07 09:37 被阅读9次

    在 web 开发中经常使用图片上传功能,目前有许多免费的资源可以让开发者轻松实现图片上传功能,那如何在 laravel 项目中轻松实现上传头像功能呢?最近我在开发我的个人网站时就用到这个功能,下面我说说我的具体实现思路。

    设计数据表字段

    我们需要在 users 用户表里面添加一个 avatar 字段来存用户的头像地址,生成用户表的迁移文件database/migrations/[timestamp]_create_users_table.php 中的代码如下:

    <?php
    
    use Illuminate\Support\Facades\Schema;
    use Illuminate\Database\Schema\Blueprint;
    use Illuminate\Database\Migrations\Migration;
    
    class CreateUsersTable extends Migration
    {
        /**
         * Run the migrations.
         *
         * @return void
         */
        public function up()
        {
            Schema::create('users', function (Blueprint $table) {
                $table->increments('id');
                $table->string('name');
                $table->string('email')->unique();
                $table->string('sex')->nullable();
                $table->string('phone')->unique()->nullable();
                $table->string('password')->nullable();
                $table->string('avatar')->nullable();
                $table->rememberToken();
                $table->timestamps();
            });
        }
    
        /**
         * Reverse the migrations.
         *
         * @return void
         */
        public function down()
        {
            Schema::dropIfExists('users');
        }
    }
    
    

    打开头像修改页面

    routes/web.php 中添加打开修改头像页面的路由:

    Route::get('users/{user}/edit_avatar','UsersController@editAvatar')->middleware('auth')->name('users.edit_avatar');
    

    使用命令创建 UsersController 控制器,命令如下:

    php artisan make:controller UsersController
    

    该命令会在 app/Http/Controllers 下生成 UsersController.php 文件,在 UsersController.php 中添加 editAvatar 方法,用以打开修改头像的页面,代码如下:

    <?php
    
    namespace App\Http\Controllers;
    
    use App\Handlers\ImageUploadHandler;
    use App\Models\User;
    use App\Notifications\EmailVerificationNotification;
    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\Auth;
    use Illuminate\Support\Facades\Cache;
    use Illuminate\Support\Facades\Mail;
    
    class UsersController extends Controller
    {
        
        public function editAvatar(User $user)
        {
            return view('users.edit_avatar', compact('user'));
        }
    }
    
    

    修改头像页面如下:

    修改页面截图

    resources/views/users/edit_avatar.blade.php 文件中实现这个界面,代码如下:

    @extends('layouts.app')
    @section('title')
        基本信息
    @stop
    @section('content')
        <section class="section" >
            <div class="container">
                <div class="columns">
                    <div class="column is-3">
                        <div class="card">
                            <div class="card-content">
                                <nav class="panel ">
                                    <a class="panel-block" href="{{url('users/'.$user->id.'/edit')}}">
                                <span class="panel-icon">
                                  <i class="fa fa-book" aria-hidden="true"></i>
                                </span>
                                        个人信息
                                    </a>
                                    <a class="panel-block is-active"  href="{{ route('users.edit_avatar',$user->id) }}">
                                <span class="panel-icon">
                                  <i class="fa fa-picture-o" aria-hidden="true"></i>
                                </span>
                                        修改头像
                                    </a>
                                    <a class="panel-block" href="{{ route('users.edit_password',$user->id) }}">
                                <span class="panel-icon">
                                  <i class="fa fa-lock" aria-hidden="true"></i>
                                </span>
                                        修改密码
                                    </a>
                                    <div class="panel-block">
                                        <a class="button is-link is-outlined is-fullwidth">
                                            建议反馈
                                        </a>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <div class="column is-9">
                        <div class="card">
                            <div class="card-content">
                                <h2 class="title is-4"><span class="icon"><i class="fa fa-picture-o"></i></span> 请选择图片</h2>
                                <hr>
                                @if(\Illuminate\Support\Facades\Session::has('mes'))
                                    <p class="field">
                                       <span class="has-text-danger">
                                           {{\Illuminate\Support\Facades\Session::get('mes')}}
                                       </span>
                                    </p>
                                @endif
                                <form action="{{route('users.update_avatar',$user->id)}}" method="post" enctype="multipart/form-data">
                                    {{csrf_field()}}
                                   <div class="columns">
                                       <div class="column is-3">
                                           <div class="">
                                               <strong>请选择图片:</strong>
                                               <figure class="image is-1by1"><img src="{{asset($user->avatar)}}"></figure>
                                           </div>
                                       </div>
                                   </div>
                                    <div class="columns">
                                        <div class="column is-3">
                                            <div class="file is-boxed">
                                                <label class="file-label">
                                                    <input class="file-input" type="file" name="avatar">
                                                    <span class="file-cta">
                                                      <span class="file-icon">
                                                        <i class="fa fa-upload"></i>
                                                      </span>
                                                      <span class="file-label">
                                                        选择一张图片
                                                      </span>
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="columns">
                                        <div class="column is-3">
                                            <button class="button is-link" type="submit">
                                                <span>上传头像</span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @stop
    
    

    上传图片并修改头像

    用户点击选择一张图片按钮后选中一张图片,然后点击上传头像按钮,即可修改头像成功。接下来继续实现上传图片功能,在
    routes/web.php 中添加修改头像路由:

    Route::post('users/{user}/update_avatar','UsersController@updateAvatar')->middleware('auth')->name('users.update_avatar');
    

    app/Htpp/Controllers/UsersController.php 中添加 updateAvatar方法,用以修改头像,代码如下:

    public function updateAvatar(User $user,Request $request,ImageUploadHandler $uploader)
    {
        if ($request->avatar) {
            $result = $uploader->save($request->avatar, 'avatars', 1);
            if ($result) {
                $data['avatar'] = $result['path'];
            }
        }
        $user->avatar=$data['avatar'];
        $user->save();
        return redirect()->route('users.edit_avatar', $user->id)->with('success', '更新成功');
    }
    

    细心的你可能已经注意到了,这里引入一个 ImageUploadHandler 类,并用它的 save 方法来处理图片上传,该类的代码也很简单,代码如下:

    app/Handlers/ImageUploadHandler.php

    <?php
    namespace App\Handlers;
    
    class ImageUploadHandler
    {
        // 只允许以下后缀名的图片文件上传
        protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];
    
        public function save($file, $folder, $file_prefix)
        {
            // 构建存储的文件夹规则,值如:uploads/images/avatars/201709/21/
            // 文件夹切割能让查找效率更高。
            $folder_name = "uploads/images/$folder/" . date("Ym/d", time());
    
            // 文件具体存储的物理路径,`public_path()` 获取的是 `public` 文件夹的物理路径。
            // 值如:/home/vagrant/Code/larabbs/public/uploads/images/avatars/201709/21/
            $upload_path = public_path() . '/' . $folder_name;
    
            // 获取文件的后缀名,因图片从剪贴板里黏贴时后缀名为空,所以此处确保后缀一直存在
            $extension = strtolower($file->getClientOriginalExtension()) ?: 'png';
    
            // 拼接文件名,加前缀是为了增加辨析度,前缀可以是相关数据模型的 ID
            // 值如:1_1493521050_7BVc9v9ujP.png
            $filename = $file_prefix . '_' . time() . '_' . str_random(10) . '.' . $extension;
    
            // 如果上传的不是图片将终止操作
            if ( ! in_array($extension, $this->allowed_ext)) {
                return false;
            }
    
            // 将图片移动到我们的目标存储路径中
            $file->move($upload_path, $filename);
    
            return [
                'path' => config('app.url') . "/$folder_name/$filename"
            ];
        }
    
    }
    

    实现效果如下:

    修改成功截图

    至此简单的头像上传功能已然完成,各位大神可能会觉得很简单,要的就是简单,写这样的文章是为了增强自己的记忆,同时给初学者一些参考,后面我会接着写如何在评论里面实现拖拽/粘贴上传图片。

    相关文章

      网友评论

      本文标题:如何在 Laravel 项目中轻松实现上传头像功能?

      本文链接:https://www.haomeiwen.com/subject/jemqgftx.html