Préface
Récemment, l'entreprise de projet avait besoin de mettre en œuvre une fonction de gestion des ressources, j'ai donc brièvement appris à utiliser Alibaba Cloud OSS sur le front-end.
À l'origine, ces éléments étaient implémentés sur le backend, mais cette méthode présente de nombreux inconvénients. Par exemple, le téléchargement de fichiers doit être effectué deux fois, d'abord téléchargé sur le backend, puis téléchargé depuis le backend vers Alibaba Cloud OSS, ce qui consomme de la bande passante et perd du temps ; de plus, le front-end ne peut pas encore obtenir la progression réelle du téléchargement. Il ne peut connaître que la progression du téléchargement vers le back-end. Par conséquent, il faudra un certain temps pour voir le fichier après son téléchargement, surtout lorsque le fichier est relativement volumineux.
Si vous pouvez télécharger directement des fichiers sur Alibaba Cloud OSS sur le front-end, tous les problèmes ci-dessus seront facilement résolus. Mais il y a un autre problème de sécurité à l'heure actuelle. AccessKeyId et accessKeySecret sont nécessaires lors du téléchargement. S'ils sont placés dans le code frontal, ils peuvent être facilement divulgués et volés. Évidemment, le fonctionnaire est également conscient de ce problème et propose donc une autre façon d'utiliser STS pour une autorisation temporaire. Les avantages sont les suivants :
- Vous n'avez pas besoin de révéler votre clé à long terme (AccessKey) à l'application tierce, générez simplement un jeton d'accès et donnez le jeton à l'application tierce. Vous pouvez personnaliser les droits d'accès et la durée de validité de ce token.
- Vous n'avez pas à vous soucier de la révocation des autorisations. Le jeton d'accès expirera automatiquement après son expiration.
De cette façon, il n'est pas nécessaire de mettre des clés importantes sur le front-end, et le travail du back-end est de restituer ces jetons pour qu'ils soient utilisés par le front-end. Même s'ils sont exposés, ils auront une période de validité, et le facteur de sécurité est grandement amélioré. Je ne parlerai pas de la partie back-end car je n'en suis pas responsable (enfin, je ne connais pas non plus le back-end). Vous pouvez lire la documentation officielle pour plus de détails . La création de rôles d'utilisateur et de politiques d'autorisation par Alibaba Cloud peut également être trouvée dans les documents officiels et ne sera pas présentée ici.
télécharger
Vous devez d’abord télécharger le SDK Alibaba Cloud OSS :
npm install ali-oss
encapsulation
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)
}
En fait, la partie du fichier téléchargé peut également être empaquetée, mais comme le fichier téléchargé implique d'autres variables, s'il est empaqueté, il y a trop de paramètres passés, donc je ne prends pas la peine de l'empaqueter - -, cela peut être décidé en fonction aux besoins des entreprises.
utiliser
// 将文件流上传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)
}
Au cours de ce processus, divers problèmes peuvent survenir, mais vous pouvez essentiellement trouver des solutions aux problèmes courants dans les documents officiels . La plupart des problèmes que vous rencontrez sont des problèmes de stratégie inter-domaines et d'autorisation, il suffit de les configurer.
Référence :
document officiel d'Alibaba Cloud OSS
Téléchargement direct frontal de Vue sur Alibaba Cloud OSS (prend en charge le téléchargement de reprise de point d'arrêt, le téléchargement fractionné, le téléchargement par lots)
Si vous avez des questions, veuillez en discuter ensemble ~