序文
最近、プロジェクト業務でリソース管理機能を実装する必要があったので、フロントエンドでの Alibaba Cloud OSS の使い方を簡単に学びました。
本来、これらはバックエンドに実装されていましたが、この方法には多くの欠点があります。たとえば、ファイルのアップロードを 2 回行う必要があり、最初にバックエンドにアップロードし、次にバックエンドから Alibaba Cloud OSS にアップロードする必要があり、帯域幅と時間の無駄であり、また、フロントエンドは実際のアップロードの進行状況をまだ取得できず、バックエンドへのアップロードの進行状況のみを知ることができるため、アップロード後にファイルを確認するまでに時間がかかります。特にファイルが比較的大きい場合。
フロントエンドで Alibaba Cloud OSS にファイルを直接アップロードできれば、上記の問題はすべて簡単に解決されます。ただし、現時点では別のセキュリティ上の問題があり、アップロード時に AccessKeyId と accessKeySecret が必要になるため、これらがフロントエンド コードに配置されている場合、簡単に漏洩して盗まれる可能性があります。明らかに当局もこの問題を認識しているため、一時的な認証に STS を使用する別の方法が提供されています。
- 長期キー (AccessKey) をサードパーティ アプリケーションに公開する必要はありません。アクセス トークンを生成して、そのトークンをサードパーティ アプリケーションに渡すだけです。このトークンのアクセス権と有効期間はカスタマイズできます。
- アクセス トークンの有効期限が切れると、アクセス トークンは自動的に期限切れになりますので、アクセス許可の取り消しを心配する必要はありません。
このように、フロントエンドに重要なキーを置く必要はなく、バックエンドの仕事は、これらのトークンをフロントエンドで使用するために返すことです。たとえ公開されたとしても、トークンには有効期限があり、安全性が大幅に向上します。バックエンド部分については私は担当していないので割愛します（まあ、私もバックエンドのことは知りませんが）詳細は公式ドキュメントを読んでください。Alibaba Cloud のユーザー ロールと認可ポリシーの作成については公式ドキュメントにも記載されているため、ここでは紹介しません。
ダウンロード
まず、Alibaba Cloud OSS SDK をダウンロードする必要があります。
npm install ali-oss
カプセル化
import OSS from 'ali-oss' // 引入依赖
import {
getOSSToken } from '@/api/app/xxx' // 后端接口，获取临时凭证
// 生成client
export async function getAliOssClient() {
const data = await getOSSToken()// 获取凭证
const parseMast = {
bucket: data.bucketName, // bucket名称
region: data.endpoint.split('.')[0], // 地域
accessKeyId: data.accessKeyId,
accessKeySecret: data.accessKeySecret,
stsToken: data.securityToken,
expiration: data.expiration, // 有效期
refreshSTSToken: async() => {
// 刷新临时访问凭证的回调，在上传大文件的时候会用到
const info = await getOSSToken()
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.securityToken
}
},
// 刷新临时访问凭证的时间间隔，单位为毫秒，在过期前一分钟刷新
// 过期时间是后端配的，这里配合后端把时间写死也可以，例如 15 分钟过期，10 分钟就可以刷新一次
refreshSTSTokenInterval: new Date(data.expiration) - new Date() - 1000 * 60
}
return new OSS(parseMast) // 调用OSS依赖
}
// 下载文件
export async function downloadFromAliOss(fileName) {
const client = await getAliOssClient()
const response = {
'content-disposition': `attachment; filename=${
encodeURIComponent(fileName)}`
}
const url = client.signatureUrl(fileName, {
response })
const a = document.createElement('a')
a.style.display = 'none'
a.href = url
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
実は、アップロードしたファイル部分もカプセル化できるのですが、アップロードしたファイルには他の変数も含まれているため、カプセル化すると渡されるパラメータが多すぎるため、カプセル化するのが面倒なので、ビジネスニーズに応じて決めることができます。
使用
// 将文件流上传oss
async onSubmit() {
for (const item of this.fileList) {
item.client = await getAliOssClient(this.appId)
this.$set(item, 'percentage', 0)
// 自定义文件名路径，如果要上传到特定的目录，需要将前缀也带上
// 例如 fileName 为 '/a/b/c/test.txt'，会将 test.txt 上传到对应目录下
const fileName = this.uploadPath + item.name
// 请求oss接口上传
// 分片上传
item.client.multipartUpload(fileName, item.raw, {
parallel: this.parallel, // 并发数量，一般是 4
partSize: this.partSize, // 分片大小，一般是 1M，也就是 1024 * 1024
progress: async(p, checkpoint) => {
// 监听上传事件
await this.onUploadProgress(item, p, checkpoint)
},
timeout: 120000 // 2分钟超时
}).then((response) => {
// console.log(response);
}).catch((error) => {
this.$set(item, 'myStatus', 'failed')
console.log(error)
})
}
},
// 上传事件
async onUploadProgress(item, p, checkpoint) {
if (checkpoint) {
this.checkpoints[checkpoint.uploadId] = checkpoint // 保留分片，可以做断点续传，这部分暂时没有实现，可以参照网上的做法，或者官方文档
item.upload = checkpoint.uploadId
}
// 上传进度
item.percentage = Number((p * 100).toFixed(2))
},
// 取消上传
onCancelUpload(item, index) {
item.client.cancel()
this.fileList.splice(index, 1)
}
このプロセス中にさまざまな問題が発生する可能性がありますが、基本的には公式ドキュメントのFAQで解決策が見つかります。遭遇する問題のほとんどはクロスドメインおよび認可ポリシーの問題です。それらを設定するだけです。
参考：
Alibaba Cloud OSS公式ドキュメント
VueフロントエンドはAlibaba Cloud OSSに直接送信されます（ブレークポイントレジュームアップロード、マルチパートアップロード、バッチアップロードをサポート）
質問がある場合は、一緒に議論してください〜