在 web 开发中经常使用图片上传功能,目前有许多免费的资源可以让开发者轻松实现图片上传功能,那如何在 laravel 项目中轻松实现上传头像功能呢?最近我在开发我的个人网站时就用到这个功能,下面我说说我的具体实现思路。
设计数据表字段
我们需要在 users
用户表里面添加一个 avatar
字段来存用户的头像地址,生成用户表的迁移文件database/migrations/[timestamp]_create_users_table.php
中的代码如下:
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
方法,用以打开修改头像的页面,代码如下:
修改头像页面如下:
在 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
@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
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"
];
}
}
实现效果如下:
至此简单的头像上传功能已然完成,各位大神可能会觉得很简单,要的就是简单,写这样的文章是为了增强自己的记忆,同时给初学者一些参考,后面我会接着写如何在评论里面实现拖拽/粘贴上传图片。