欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-27 13:46:00
...

在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','aaa@qq.com')->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'));
    }
}

修改头像页面如下:

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

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','aaa@qq.com')->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 项目中轻松实现上传头像功能?

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

感谢阅读,我是sevdot,全栈开发工程师和终身学习者。
不喜勿喷,以人为善,比聪明更重要。
欢迎留言和关注,且接受任何宝贵的建议。
了解更多