prefacio
Recientemente, el negocio del proyecto necesitaba implementar una función de gestión de recursos, por lo que aprendí brevemente cómo usar Alibaba Cloud OSS en el front-end.
Originalmente, estas cosas se implementaron en el backend, pero este método tiene muchas deficiencias. Por ejemplo, la carga de archivos debe realizarse dos veces, primero cargarse en el backend y luego cargarse desde el backend a Alibaba Cloud OSS, lo que ocupa ancho de banda y Es una pérdida de tiempo; además, el front-end no puede obtener el progreso real de la carga todavía. Solo puede conocer el progreso de la carga en el back-end. Como resultado, tomará algún tiempo ver el archivo después de cargarlo. especialmente cuando el archivo es relativamente grande.
Si puede cargar archivos directamente en Alibaba Cloud OSS en el front-end, los problemas anteriores se resolverán. Pero hay otro problema de seguridad en este momento: AccessKeyId y accessKeySecret son necesarios al cargar. Si se colocan en el código de interfaz, pueden filtrarse y robarse fácilmente. Obviamente, el funcionario también es consciente de este problema, por lo que proporciona otra forma, utilizando STS para autorización temporal, las ventajas son las siguientes:
- No necesita revelar su clave a largo plazo (AccessKey) a la aplicación de terceros, simplemente genere un token de acceso y entregue el token a la aplicación de terceros. Puede personalizar los derechos de acceso y el período de validez de este token.
- No necesita preocuparse por la revocación del permiso: el token de acceso caducará automáticamente una vez que caduque.
De esta manera, no es necesario colocar claves importantes en el front-end, y el trabajo del back-end es devolver estos tokens para que los use el front-end. Incluso si están expuestos, habrá un período de validez y el factor de seguridad ha mejorado mucho. No hablaré de la parte del backend porque no soy responsable de ello (bueno, tampoco conozco el backend), puedes consultar la documentación oficial para obtener más detalles . Alibaba Cloud crea roles de usuario y políticas de autorización, que también se pueden encontrar en documentos oficiales, por lo que no los presentaré aquí.
descargar
Primero debe descargar el SDK de Alibaba Cloud OSS:
npm install ali-oss
encapsulación
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)
}
De hecho, la parte del archivo cargado también se puede encapsular, pero dado que el archivo cargado involucra otras variables, se pasan demasiados parámetros cuando se encapsula, por lo que soy demasiado vago para encapsularlo; se puede decidir de acuerdo con las necesidades comerciales.
usar
// 将文件流上传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)
}
Durante este proceso, pueden surgir varios problemas, pero básicamente puede encontrar soluciones en las preguntas frecuentes de los documentos oficiales . La mayoría de los problemas que encontrará son problemas entre dominios y políticas de autorización, simplemente configúrelo.
Referencia:
Documento oficial de Alibaba Cloud OSS
El front-end de Vue se transmite directamente a Alibaba Cloud OSS (admite carga de currículum de punto de interrupción, carga de varias partes, carga por lotes)
Si tiene alguna pregunta, discútala juntos ~