uploadhandler.php,如何在 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')

修改头像

修改密码

建议反馈

请选择图片

---

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

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

@endif

{{csrf_field()}}

请选择图片：

选择一张图片

上传头像

@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

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"

];

}

}

实现效果如下：

修改成功截图

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