[開源專案] Laravel 圖片上傳元件,支援直傳雲端儲存

翁航發表於2017-11-28
Laravel元件

在傳統的圖片上傳中，相比於先上傳到伺服器，再從伺服器傳到雲端儲存來說，少了一步轉發。從架構上來說，原來的上傳都統一走網站伺服器，上傳量過大時，瓶頸在網站伺服器，可能需要擴容網站伺服器。採用表單上傳後，上傳都是直接從客戶端傳送到雲端儲存。上傳量過大時，壓力都在雲端儲存上，由雲端儲存來保障服務質量。

Github: laravel-uploader

file

功能

  • 圖片上傳預覽
  • 上傳進度顯示
  • 圖片格式限制
  • 上傳數量限制　
  • 精美的UI
  • 支援直傳到雲端儲存

安裝

composer require sunnyshift/laravel-uploader

新增服務提供者

SunnyShift\Uploader\UploaderServiceProvider::class,

生成資原始檔

php artisan vendor:publish --provider=SunnyShift\\LaravelUploader\\UploadServiceProvider

使用

  1. 新增上傳元件到頁面

    @uploader(['name' => 'avatar', 'max' => 3, 'accept' => 'jpg,png,gif'])
  2. 新增資原始檔 
    @uploader('assets')

    該元件依賴jQuery，所以在引入的資原始檔的時候必須先引入jQuery

直傳到雲端儲存

目前支援的第三方雲儲存：
本地(local) 百度雲(bos) 騰訊雲(cos) 阿里雲(oss) 七牛雲(qiniu) 新浪雲(scs) 又拍雲(upyun)

其中的本地不算雲端儲存，只是標識仍舊支援本地磁碟儲存。

  • 青雲的鑑權方式比較奇特所以暫時無法支援
  • UCloud的鑑權方式太複雜暫時不打算支援

1.配置

百度雲：

'disks' => [
    'bos' => [
        'driver'       => 'bos',
        'access_key_id'    =>  'xxxxxxxxxx',
        'access_key_secret'   => 'xxxxxxxxxx',
        'bucket'       => 'xxx',
        'region'    =>  'gz'    //改成儲存桶相應地域
    ],
]

騰訊雲：

'cos' => [
        'driver'       => 'cos',
        'app_id'    =>  '123456789',
        'secret_id'   => 'xxxxxxxxxxx',
        'secret_key'   => 'xxxxxxxxxxx',
        'bucket'       => 'xxxxxxxxx',
        'region'    =>  'sh'    //改成儲存桶相應地域
    ]

注意，騰訊雲端儲存的時候不是以資源的訪問路徑存的，會加上appid和儲存桶的引數。主要是騰訊雲上傳後沒有返回資源的相對路徑，而且這樣的儲存方式也是官方推崇的。

阿里雲：

'oss' => [
        'driver'       => 'oss',
        'access_key'   => 'xxxxxxxxxx',
        'secret_key'   => 'xxxxxxxxxx',
        'bucket'       => 'xxxxx',
    ],

七牛雲：

'qiniu' => [
        'driver'     => 'qiniu',
        'access_key' => 'xxxxxxxxxxxxxxxxxx',
        'secret_key' => 'xxxxxxxxxxxxxxxxxx',
        'bucket'     => 'xxxxxxxxxxxxxxxxxx',
        'domain'     => 'xxxxxxxxxxx'
    ],

新浪雲：

'scs' => [
        'driver'       => 'scs',
        'access_key'    =>  'xxxxxx',
        'secret_key'   => 'xxxxxxx',
        'bucket'       => 'xxxxxxxx'
    ]

又拍雲：

'upyun' => [
        'driver'     => 'upyun',
        'operator'   => 'xxxxx',
        'password'   => 'xxxxxx',
        'bucket'     => 'xxxxxx',
        'domain'     => 'xxxxxx',
        'form_api_secret'     =>  'xxxxx',
    ]

2.設定雲儲存

FILESYSTEM_DRIVER=qiniu

擴充套件

當然，你也可以擴充支援的雲端儲存，很簡單:

1.新增驅動

<?php
use SunnyShift\Uploader\Contracts\UploaderContract;

class MyStorage implements UploaderContract {
        /**
     * 請求url
     * @return string
     */
    public function url() : string;

    /**
     * 請求頭
     * @return array
     */
    public function header() : array;

    /**
     * 請求體
     * @return array
     */
    public function params() : array;

    /**
     * 檔案表單名
     * @return string
     */
    public function fileName() : string;

    /**
     * 響應的url的鍵.
     * @return string
     */
    public function responseKey() : string;
}

2.擴充

Uploader::extend('mystorage', function($app) {
    return new MyStorage();
});

3.使用

FILESYSTEM_DRIVER=mystorage

或者

Uploader::setAdapter('mystorage');

說明

自帶的上傳元件UI是按照WEUI的上傳功能設計的，可能不能滿足您業務的需求，那麼您可以自行構建UI後再把一些請求引數傳到前臺。也很簡單：

$data = Uploader::build($jsoned = true);

其中data包含實現SunnyShift\Uploader\Contracts\UploaderContract的所有引數，可以根據具體業務使用。

Github: laravel-uploader

微信與訂閱號，歡迎關注　:smile:
file

部落格地址

相關文章