### 上傳頭像
在 Laravel 中,我們可直接通過 [請求對象(Request)](https://learnku.com/docs/laravel/5.8/requests#retrieving-uploaded-files) 來獲取用戶上傳的文件,如以下兩種方法:
```php
// 第一種方法
$file = $request->file('avatar');
// 第二種方法,可讀性更高
$file = $request->avatar;
```
為表單添加 `enctype="multipart/form-data"` 聲明了。請記住,在圖片或者文件上傳時,為表單添加此句聲明是必須的。
Laravel 的『用戶上傳文件對象』底層使用了 Symfony 框架的 [UploadedFile](http://api.symfony.com/3.0/Symfony/Component/HttpFoundation/File/UploadedFile.html) 對象進行渲染,為我們提供了便捷的文件讀取和管理接口,我們將在后面使用這些方法。
### 存儲用戶上傳圖片
本項目中,我們不止上傳頭像需要用到『圖片上傳功能』,在后面發布帖子功能中,我們也將會允許用戶上傳圖片,所以此處我們需要預先設計一下圖片上傳相關的邏輯,我們可以將『圖片上傳』核心操作做成一個工具類(注意頂部 `use Illuminate\Support\Str;`):
*app/Handlers/ImageUploadHandler.php*
```php
<?php
namespace App\Handlers;
use Illuminate\Support\Str;
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"
];
}
}
```
我們將使用 `app/Handlers` 文件夾來存放本項目的工具類,『工具類(utility class)』是指一些跟業務邏輯相關性不強的類,`Handlers` 意為 **處理器** ,ImageUploadHandler 意為圖片上傳處理器,簡單易懂。
```
`public_path()` 獲取的是 `public` 文件夾的物理路徑。
```
### 裁剪圖片
我們個人空間里顯示區域最大也就 208px,即使要兼容 [視網膜屏幕(Retina Screen)](https://baike.baidu.com/item/視網膜屏幕) 的話,最多也就需要 208px * 2 = 416px 。圖片太大會拖慢頁面的加載速度,所以接下來我們將對此進行優化。
我們將使用備受歡迎的 [Intervention/image](https://github.com/Intervention/image) 擴展包來處理圖片裁切的邏輯,接下來我們需要先安裝此擴展包;
#### 1.安裝擴展包
1. composer安裝
```
$ composer require intervention/image
```
2. 配置信息
執行以下命令獲取配置信息:
```
$ php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"
```
#### 2.開始裁剪
我們將裁切的邏輯寫在 `ImageUploadHandler` 中,請將以下代碼替換:
*app/Handlers/ImageUploadHandler.php*
```php
<?php
namespace App\Handlers;
use Image;
class ImageUploadHandler
{
protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];
public function save($file, $folder, $file_prefix, $max_width = false)
{
// 構建存儲的文件夾規則,值如: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);
// 如果限制了圖片寬度,就進行裁剪
if ($max_width && $extension != 'gif') {
// 此類中封裝的函數,用于裁剪圖片
$this->reduceSize($upload_path . '/' . $filename, $max_width);
}
return [
'path' => config('app.url') . "/$folder_name/$filename"
];
}
public function reduceSize($file_path, $max_width)
{
// 先實例化,傳參是文件的磁盤物理路徑
$image = Image::make($file_path);
// 進行大小調整的操作
$image->resize($max_width, null, function ($constraint) {
// 設定寬度是 $max_width,高度等比例雙方縮放
$constraint->aspectRatio();
// 防止裁圖時圖片尺寸變大
$constraint->upsize();
});
// 對圖片修改后進行保存
$image->save();
}
}
```
以上的 `save()` 方法中,我們新增了 `$max_width` 參數,用來指定最大圖片寬度,我們修改 UsersController 的 `update()` 方法中的調用,修改為:
```php
$result = $uploader->save($request->avatar, 'avatars', $user->id, 416);
```