前言
某天在羣裏摸 🐟 ，聊到了圖牀相關的話題，羣友推薦了 又拍雲。
說有活動，可以白嫖存儲，10G + 15G（HTTP/HTTPS 流量） 。筆者之前一直用的七牛雲 10G + 10G（回源流量）。
| 又拍雲 | 七牛雲 |
|---|---|
 |
 |
| 註冊送1個月的代金券 + 網站掛推廣送1年代金券 | 註冊即可送每月都有 |
筆者就花了點時間研究了一下又拍雲的 SDK 和對象存儲，能力上完全可以平替七牛雲，於是就花了一點時間給圖牀應用加上了又拍雲的支持。
效果
大家可以訪問 https://imgbed.sugarat.top/ 直接體驗，默認已配置 又拍雲 存儲
下面將介紹 又拍雲對象存儲配置，關鍵API用法，如何接入上述圖牀。
對象存儲服務創建
這裏直接省略賬號註冊，參加推廣活動等步驟，直接進入對象存儲配置頁面。
訪問對象存儲控制檯，點擊創建服務
這個"服務"和其它平臺的 Bucket(桶) 類似，可以理解爲存儲空間的概念。
填一下服務名稱（全平臺唯一），綁定賬號即可
服務創建完，需要的東西基本都有了，是不是非常簡單！
- 服務名：自定義
- 賬號：自定義
- 密碼：自動生成
- 域名：測試域名
serviceName.test.upcdn.net
API 使用
token 生成
這裏推薦使用 token 認證 根據文檔：認證鑑權可知生成方式如下：
看不懂？沒關係 GPT 可以幫你，直接複製丟給它。
這不代碼就來了。
我們可以適當優化一下，不需要用到第三方庫base64-js，直接使用 Node.js 的內置模塊crypto 即可。
import crypto from 'crypto'
/**
* 生成 upyun 上傳token
* @param {*} operator 賬號
* @param {*} password 密碼
* @param {*} method 方法（PUT）
* @param {*} uriPrefix 請求公共前綴
* @param {*} date 過期時間
* @returns 上傳憑證
*/
function generateUpyunToken(operator, password, method, uriPrefix, date) {
// 密碼的md5值，祕鑰
const secret = crypto.createHash('md5').update(password).digest('hex')
// 構造用於計算校驗值的字符串
const value = `${method}&${uriPrefix}&${date}`
// 使用 hmac-sha1 算法生成token
const token = crypto.createHmac('sha1', secret) // 使用密碼的MD5值作爲祕鑰
.update(value) // 設置用於計算校驗值的字符串
.digest() // 計算校驗值
.toString('base64') // 轉換爲base64 格式
// 組合成要求的格式
return `UPYUN ${operator}:${token}`
}
代碼非常簡潔明瞭，使用方式如下
const token = generateUpyunToken('賬號',
'密碼',
'PUT',
'服務名/資源公共前綴路徑', // 服務名 + 公共資源前綴路徑構成
new Date().getTime() + 1000 * 60 * 60 * 24 * 90 // 計算過期時間 90天后的日期
)
理論上這個 token 也可以在前端生成，調用和後端一致的算法即可。
前端上傳
① 安裝 upyun sdk
npm i upyun
② 上傳示例
根據文檔，可以看到客戶端上傳需要的參數。
Authorization：前面通過生成的tokenX-Date：請求日期時間，GMT 格式字符串X-Upyun-Uri-Prefix：服務名 + 資源公共前綴路徑X-Upyun-Expire：過期時間
下面就是核心的上傳方法。
import upyun from 'upyun'
const service = new upyun.Service('服務名')
const client = new upyun.Client(service, () => ({
'Authorization': '前面通過生成的token',
'X-Date': new Date().toUTCString(),
'X-Upyun-Uri-Prefix': '服務名/資源公共前綴路徑',
'X-Upyun-Expire': date, // 前面生成 Token 時的 date 參數
}))
const sourceKey = '資源公共前綴路徑/資源名' // 'test/imgs/abc.png'
// 調用上傳
client.putFile(sourceKey, file) // 返回值 Promise<boolean>
③ 方法封裝
我們可以簡單封裝一下，方便調用
interface UPYunConfig {
/**
* 服務名
*/
serviceName: string
/**
* 上傳憑證
*/
token: string
/**
* 資源公共前綴
*/
prefix: string
/**
* 過期時間 new Date().getTime() + 1000 * 60 * 60 * 24 * 90
*/
date: number
/**
* 域名（用於拼接最後的訪問鏈接）
*/
domain: string
/**
* 最後的資源名，建議使用 uuid 或者文件的 MD5
*/
filename?: string
}
async function uploadFile(file: File, ops: UPYunConfig) {
const { serviceName, prefix, token, date, domain, filename } = ops
const service = new upyun.Service(serviceName)
const client = new upyun.Client(service, () => ({
'Authorization': token,
'X-Date': new Date().toUTCString(),
'X-Upyun-Uri-Prefix': `${serviceName}/${prefix}`,
'X-Upyun-Expire': date,
}))
const key = `${prefix}/${filename || file.name}`
const isSuccess = await client.putFile(key, file)
// 返回最後可以用於訪問的鏈接
return isSuccess ? Promise.resolve(`${domain}/${key}`) : Promise.reject(new Error('上傳失敗'))
}
接入純靜態圖牀
上述邏輯我都封裝在了自己的圖牀應用中：GitHub: image-bed-qiniu
# 又拍雲相關配置
UPYUN_OPERATOR=operator
UPYUN_PASSWORD=password
UPYUN_BUCKET=service-name
UPYUN_DOMAIN=http://service-name.test.upcdn.net
UPYUN_PREFIX=image
UPYUN_SCOPE=default
# token有效期，默認3個月，單位秒，你可以自行設置（60*60*24*30）
# UPYUN_EXPIRES=2592000
執行 node upyun-token.js 即可生成需要的 token。
將其粘貼配置到 線上的圖牀應用，或者自己部署的均可 image-bed-qiniu:client
其它
線上使用，推薦 綁定自定義域名 和 開啓HTTPS 支持。
這兩個直接在平臺里根據指引操作即可，步驟也很簡單。
最後
後續準備提供一個圖牀的 Docker 鏡像，這樣部署起來也更加方便。
大家有其它可白嫖的圖牀也可推薦推薦一下。