「擴(kuò)展包」Laravel-filesystem-oss 2.0 發(fā)布

GitHub：https://github.com/iiDestiny/laravel-filesystem-oss

最近有時(shí)間把之前寫的 oss 擴(kuò)展包給升級(jí)了一下朦促，改動(dòng)如下

• 新增獲取官方 SDK 完整處理能力插件
• 優(yōu)化獲取直傳配置方法丸边，新增自定義回調(diào)參數(shù)
• 新增直傳回調(diào)驗(yàn)簽插件挖腰，讓驗(yàn)簽變得簡(jiǎn)單
• 修復(fù)直傳回調(diào)功能盖彭，讓 oss 服務(wù)器可正常進(jìn)入應(yīng)用服務(wù)器回調(diào)
• 新增 bucket 切換能力
• 新增針對(duì)「私有 bucket」訪問資源能力
• 優(yōu)化 readme 文檔玉转，讓讀者更加容易理解

擴(kuò)展包要求

• PHP >= 7.0

安裝命令

$ composer require "iidestiny/laravel-filesystem-oss" -vvv

配置

1. 將服務(wù)提供者 Iidestiny\LaravelFilesystemOss\OssStorageServiceProvider::class 注冊(cè)到 config/app.php 文件:

'providers' => [
    // Other service providers...
    Iidestiny\LaravelFilesystemOss\OssStorageServiceProvider::class,
],

Laravel 5.5+ 會(huì)自動(dòng)注冊(cè)服務(wù)提供者可忽略

2. 在 config/filesystems.php 配置文件中添加你的新驅(qū)動(dòng)

<?php

return [
   'disks' => [
        //...
        'oss' => [
            'driver' => 'oss',
            'root' => '', // 設(shè)置上傳時(shí)根前綴
            'access_key' => env('OSS_ACCESS_KEY'),
            'secret_key' => env('OSS_SECRET_KEY'),
            'endpoint'   => env('OSS_ENDPOINT'), // 使用 ssl 這里設(shè)置如: https://oss-cn-beijing.aliyuncs.com
            'bucket'     => env('OSS_BUCKET'),
            'isCName'    => env('OSS_IS_CNAME', false), // 如果 isCname 為 false履婉，endpoint 應(yīng)配置 oss 提供的域名如：`oss-cn-beijing.aliyuncs.com`舌菜，否則為自定義域名慢味，纷妆，cname 或 cdn 請(qǐng)自行到阿里 oss 后臺(tái)配置并綁定 bucket
            // 如果有更多的 bucket 需要切換钻蹬，就添加所有bucket，默認(rèn)的 bucket 填寫到上面凭需，不要加到 buckets 中
            'buckets'=>[
                'test'=>[
                    'access_key' => env('OSS_ACCESS_KEY'),
                    'secret_key' => env('OSS_SECRET_KEY'),
                    'bucket'     => env('OSS_TEST_BUCKET'),
                    'endpoint'   => env('OSS_TEST_ENDPOINT'),
                    'isCName'    => env('OSS_TEST_IS_CNAME', false),
                ],
                //...
            ],
        ],
        //...
    ]
];

基本使用

<?php

$disk = Storage::disk('oss');

// 上傳
$disk->put('avatars/filename.jpg', $fileContents);

// 檢查文件是否存在
$exists = $disk->has('file.jpg');

// 獲取文件修改時(shí)間
$time = $disk->lastModified('file1.jpg');
$time = $disk->getTimestamp('file1.jpg');

// 拷貝文件
$disk->copy('old/file1.jpg', 'new/file1.jpg');

// 移動(dòng)文件也可改名
$disk->move('old/file1.jpg', 'new/file1.jpg');

// 獲取文件內(nèi)容
$contents = $disk->read('folder/my_file.txt');

以上方法可在 laravel-filesystem-doc 查閱

進(jìn)階使用

// 獲取文件訪問地址「公共讀的 bucket 才生效」
$url = $disk->getUrl('folder/my_file.txt');

// 設(shè)置文件訪問有效期「$timeout 為多少秒過期」「私有 bucket 才可看見效果」
$url = $disk->signUrl('cat.png', $timeout, ['x-oss-process' => 'image/circle,r_100']);

// 和 signurl 功能一樣问欠，區(qū)別在于 $expiration 是未來過期時(shí)間如：2019-05-05 17:50:32 時(shí)鏈接失效
$url = $disk->getTemporaryUrl('file.md', $expiration);

// 可切換其他 bucket「需要在 config 配置文件中配置 buckets」
$exists = $disk->bucket('test')->has('file.jpg');

獲取官方完整 OSS 處理能力

阿里官方 SDK 可能處理了更多的事情，如果你想獲取完整的功能可通過此插件獲取粒蜈，
然后你將擁有完整的 oss 處理能力

// 獲取完整處理能力
$kernel = $disk->kernel();

// 例如：防盜鏈功能
$refererConfig = new RefererConfig();
// 設(shè)置允許空Referer顺献。
$refererConfig->setAllowEmptyReferer(true);
// 添加Referer白名單。Referer參數(shù)支持通配符星號(hào)（*）和問號(hào)（枯怖？）注整。
$refererConfig->addReferer("www.aliiyun.com");
$refererConfig->addReferer("www.aliiyuncs.com");

$kernel->putBucketReferer($bucket, $refererConfig);

更多功能請(qǐng)查看官方 SDK 手冊(cè)

前端 web 直傳配置

oss 直傳有三種方式，當(dāng)前擴(kuò)展包使用的是最完整的 服務(wù)端簽名直傳并設(shè)置上傳回調(diào) 方式度硝，擴(kuò)展包只生成前端頁(yè)面上傳所需的簽名參數(shù)肿轨，前端上傳實(shí)現(xiàn)可參考 官方文檔中的實(shí)例 或自行搜索

/**
 * 1. 前綴如：'images/'
 * 2. 回調(diào)服務(wù)器 url
 * 3. 回調(diào)自定義參數(shù)，oss 回傳應(yīng)用服務(wù)器時(shí)會(huì)帶上
 * 4. 當(dāng)前直傳配置鏈接有效期
 */
$config = $disk->signatureConfig($prefix = '/', $callBackUrl = '', $customData = [], $expire = 30);

直傳回調(diào)驗(yàn)簽

當(dāng)設(shè)置了直傳回調(diào)后蕊程，可以通過驗(yàn)簽插件椒袍，驗(yàn)證并獲取 oss 傳回的數(shù)據(jù) 文檔

注意事項(xiàng)：

• 如果沒有 Authorization 頭信息導(dǎo)致驗(yàn)簽失敗需要先在 apache 或者 nginx 中設(shè)置 rewrite
• 以 apache 為例，修改 httpd.conf 在 DirectoryIndex index.php 這行下面增加「RewriteEngine On」「RewriteRule .* - [env=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]」

// 驗(yàn)簽藻茂，就是如此簡(jiǎn)單
// $verify 驗(yàn)簽結(jié)果驹暑，$data 回調(diào)數(shù)據(jù)
list($verify, $data) = $disk->verify();
// [$verify, $data] = $disk->verify(); // php 7.1 +

if (!$verify) {
    // 驗(yàn)證失敗處理，此時(shí) $data 為驗(yàn)簽失敗提示信息
}

// 注意一定要返回 json 格式的字符串辨赐，因?yàn)?oss 服務(wù)器只接收 json 格式优俘，否則給前端報(bào) CallbackFailed
return response()->json($data);

直傳回調(diào)驗(yàn)簽后返回給前端的數(shù)據(jù)「包括自定義參數(shù)」，例如

{
    "filename": "user/15854050909488182.png",
    "size": "56039",
    "mimeType": "image/png",
    "height": "473",
    "width": "470",
    "custom_name": "zhangsan",
    "custom_age": "24"
}

這其實(shí)要看你回調(diào)通知方法具體怎么返回掀序，如果直接按照文檔給的方法返回是這個(gè)樣子

前端直傳組件分享「vue + element」

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="uploadUrl"
      :on-success="handleSucess"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
      :show-file-list="false"
      :data="data"
      :on-error="handleError"
      :file-list="files"
    >
      <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import { getOssPolicy } from '@/api/oss' // 這里就是獲取直傳配置接口

export default {
  name: 'Upload',
  props: {
    url: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      uploadUrl: '', // 上傳提交地址
      data: {}, // 上傳提交額外數(shù)據(jù)
      dialogImageUrl: '', // 預(yù)覽圖片
      files: [] // 上傳的文件
    }
  },
  computed: {},
  created() {
    this.dialogImageUrl = this.url
  },
  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList)
    },
    // 上傳之前處理動(dòng)作
    async handleBeforeUpload(file) {
      const fileName = this.makeRandomName(file.name)
      try {
        const response = await getOssPolicy()

        this.uploadUrl = response.host

        // 組裝自定義參數(shù)「如果要自定義回傳參數(shù)這段代碼不能省略」
        if (Object.keys(response['callback-var']).length) {
          for (const [key, value] of Object.entries(response['callback-var'])) {
            this.data[key] = value
          }
        }

        this.data.policy = response.policy
        this.data.OSSAccessKeyId = response.accessid
        this.data.signature = response.signature
        this.data.host = response.host
        this.data.callback = response.callback
        this.data.key = response.dir + fileName
      } catch (error) {
        this.$message.error('獲取上傳配置失敗')
        console.log(error)
      }
    },
    // 文件上傳成功處理
    handleSucess(response, file, fileList) {
      const fileUrl = this.uploadUrl + this.data.key
      this.dialogImageUrl = fileUrl
      this.$emit('update:url', fileUrl)
      this.files.push({
        name: this.data.key,
        url: fileUrl
      })
    },
    // 上傳失敗處理
    handleError() {
      this.$message.error('上傳失敗')
    },
    // 隨機(jī)名稱
    makeRandomName(name) {
      const randomStr = Math.random().toString().substr(2, 4)
      const suffix = name.substr(name.lastIndexOf('.'))
      return Date.now() + randomStr + suffix
    }
  }

}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>

擴(kuò)展包肯定還有不足之處帆焕，最后歡迎各位 PR 以帶來更好的功能。??

PS

感謝關(guān)注「GitHub 熱門」公眾號(hào)不恭，帶你了解技術(shù)圈內(nèi)熱門新鮮事叶雹！

file