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

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

设计数据表字段

我们需要在 users 用户表里面添加一个 avatar 字段来存用户的头像地址，生成用户表的迁移文件 database/migrations/[timestamp]_create_users_table.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 方法，用以打开修改头像的页面，代码如下：

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')
    
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')}}">
                            ">
                              " aria-hidden="true">
                            
                                    个人信息
                                
                                "  href="{{ route('users.edit_avatar',$user->id) }}">
                            ">
                              " aria-hidden="true">
                            
                                    修改头像
                                
                                " href="{{ route('users.edit_password',$user->id) }}">
                            ">
                              " aria-hidden="true">
                            
                                    修改密码
                                
                                
">
                                    ">
                                        建议反馈
                                    
                                
                            
                        

9">

">

">

4">">"> 请选择图片

---

@if(\Illuminate\Support\Facades\Session::has('mes'))

"> "> {{\Illuminate\Support\Facades\Session::get('mes')}}

@endif

'users.update_avatar',$user->id)}}" method="post" enctype="multipart/form-data"> {{csrf_field()}}

">

3">

"> 请选择图片：

1by1">$user->avatar)}}">

">

3">

"> "> " type="file" name="avatar"> "> "> "> "> 选择一张图片

">

3"> " type="submit"> 上传头像