GitHub：https://github.com/iiDestiny/laravel-files...
最近有時間把之前寫的 oss 擴充套件包給升級了一下，改動如下
- 新增獲取官方 SDK 完整處理能力外掛
- 優化獲取直傳配置方法，新增自定義回撥引數
- 新增直傳回撥驗籤外掛，讓驗籤變得簡單
- 修復直傳回撥功能，讓 oss 伺服器可正常進入應用伺服器回撥
- 新增 bucket 切換能力
- 新增針對「私有 bucket」訪問資源能力
- 優化 readme 文件，讓讀者更加容易理解
擴充套件包要求
- PHP >= 7.0
安裝命令
$ composer require "iidestiny/laravel-filesystem-oss" -vvv配置
- 將服務提供者
Iidestiny\LaravelFilesystemOss\OssStorageServiceProvider::class註冊到config/app.php檔案:
'providers' => [
// Other service providers...
Iidestiny\LaravelFilesystemOss\OssStorageServiceProvider::class,
],Laravel 5.5+ 會自動註冊服務提供者可忽略
- 在
config/filesystems.php配置檔案中新增你的新驅動
<?php
return [
'disks' => [
//...
'oss' => [
'driver' => 'oss',
'root' => '', // 設定上傳時根字首
'access_key' => env('OSS_ACCESS_KEY'),
'secret_key' => env('OSS_SECRET_KEY'),
'endpoint' => env('OSS_ENDPOINT'), // 使用 ssl 這裡設定如: https://oss-cn-beijing.aliyuncs.com
'bucket' => env('OSS_BUCKET'),
'isCName' => env('OSS_IS_CNAME', false), // 如果 isCname 為 false，endpoint 應配置 oss 提供的域名如：`oss-cn-beijing.aliyuncs.com`，否則為自定義域名，，cname 或 cdn 請自行到阿里 oss 後臺配置並繫結 bucket
// 如果有更多的 bucket 需要切換，就新增所有bucket，預設的 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');
// 獲取檔案修改時間
$time = $disk->lastModified('file1.jpg');
$time = $disk->getTimestamp('file1.jpg');
// 拷貝檔案
$disk->copy('old/file1.jpg', 'new/file1.jpg');
// 移動檔案也可改名
$disk->move('old/file1.jpg', 'new/file1.jpg');
// 獲取檔案內容
$contents = $disk->read('folder/my_file.txt');以上方法可在 laravel-filesystem-doc 查閱
進階使用
// 獲取檔案訪問地址「公共讀的 bucket 才生效」
$url = $disk->getUrl('folder/my_file.txt');
// 設定檔案訪問有效期「$timeout 為多少秒過期」「私有 bucket 才可看見效果」
$url = $disk->signUrl('cat.png', $timeout, ['x-oss-process' => 'image/circle,r_100']);
// 和 signurl 功能一樣，區別在於 $expiration 是未來過期時間如：2019-05-05 17:50:32 時連結失效
$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();
// 設定允許空Referer。
$refererConfig->setAllowEmptyReferer(true);
// 新增Referer白名單。Referer引數支援萬用字元星號（*）和問號（？）。
$refererConfig->addReferer("www.aliiyun.com");
$refererConfig->addReferer("www.aliiyuncs.com");
$kernel->putBucketReferer($bucket, $refererConfig);更多功能請檢視官方 SDK 手冊
前端 web 直傳配置
oss 直傳有三種方式，當前擴充套件包使用的是最完整的 服務端簽名直傳並設定上傳回撥 方式，擴充套件包只生成前端頁面上傳所需的簽名引數，前端上傳實現可參考 官方文件中的例項 或自行搜尋
/**
* 1. 字首如：'images/'
* 2. 回撥伺服器 url
* 3. 回撥自定義引數，oss 回傳應用伺服器時會帶上
* 4. 當前直傳配置連結有效期
*/
$config = $disk->signatureConfig($prefix = '/', $callBackUrl = '', $customData = [], $expire = 30);直傳回撥驗籤
當設定了直傳回撥後，可以通過驗籤外掛，驗證並獲取 oss 傳回的資料 文件
注意事項：
- 如果沒有 Authorization 頭資訊導致驗籤失敗需要先在 apache 或者 nginx 中設定 rewrite
- 以 apache 為例，修改 httpd.conf 在 DirectoryIndex index.php 這行下面增加「RewriteEngine On」「RewriteRule .* - [env=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]」
// 驗籤，就是如此簡單
// $verify 驗簽結果，$data 回撥資料
list($verify, $data) = $disk->verify();
// [$verify, $data] = $disk->verify(); // php 7.1 +
if (!$verify) {
// 驗證失敗處理，此時 $data 為驗籤失敗提示資訊
}
// 注意一定要返回 json 格式的字串，因為 oss 伺服器只接收 json 格式，否則給前端報 CallbackFailed
return response()->json($data);直傳回撥驗籤後返回給前端的資料「包括自定義引數」，例如
{
"filename": "user/15854050909488182.png",
"size": "56039",
"mimeType": "image/png",
"height": "473",
"width": "470",
"custom_name": "zhangsan",
"custom_age": "24"
}這其實要看你回撥通知方法具體怎麼返回，如果直接按照文件給的方法返回是這個樣子
前端直傳元件分享「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: {}, // 上傳提交額外資料
dialogImageUrl: '', // 預覽圖片
files: [] // 上傳的檔案
}
},
computed: {},
created() {
this.dialogImageUrl = this.url
},
methods: {
handleChange(file, fileList) {
console.log(file, fileList)
},
// 上傳之前處理動作
async handleBeforeUpload(file) {
const fileName = this.makeRandomName(file.name)
try {
const response = await getOssPolicy()
this.uploadUrl = response.host
// 組裝自定義引數「如果要自定義回傳引數這段程式碼不能省略」
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('上傳失敗')
},
// 隨機名稱
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>
擴充套件包肯定還有不足之處，最後歡迎各位 PR 以帶來更好的功能。?
本作品採用《CC 協議》，轉載必須註明作者和本文連結