实际项目中会利用COS去存储项目中上传的文件等
腾讯云对象存储(COS)除了提供多种API接口,还提供了丰富的SDK供开发者使用,作为前端,这里我参考的是JavaScript SDK文档
安装SDK
npm install cos-js-sdk-v5
使用
使用首先必须要引入SDK完成初始化cos实例,才可以调用SDK方法,例如cos.uploadFile、cos.getObject等
参考官方文档可知,SDK内部需要通过密钥生成签名,有单次临时密钥、临时密钥回调、永久密钥等,根据具体情况进行使用,这里我使用的是临时密钥回调
//在utils下新建cos.js文件用来存放相关逻辑代码
import COS from 'cos-js-sdk-v5';
let cos=null
const getCos=()=>{
//由于可能会有多文件/多次文件上传,因此这里可以加一个判断,即cos如果已经存在就不用再重新生成
if(cos) return cos
cos = new COS({
getAuthorization: async function (options, callback) {
const data = await fetchSts('xxxx'); // 需自行实现获取临时密钥逻辑
callback({
TmpSecretId: data.credentials.tmpSecretId,
TmpSecretKey: data.credentials.tmpSecretKey,
SecurityToken: data.credentials.sessionToken,
// 建议返回服务器时间作为签名的开始时间,避免客户端本地时间偏差过大导致签名错误
StartTime: data.startTime, // 时间戳,单位秒,如:1580000000
ExpiredTime: data.expiredTime, // 时间戳,单位秒,如:1580000000
ScopeLimit: true, // 细粒度控制权限需要设为 true,会限制密钥只在相同请求时重复使用
});
}
});
return cos
}
//使用上传文件
export const uploadEleFile = ( eleFile )=> {
const file=eleFile.raw
let filename=file.name
return new Promise( (resolve, reject) => {
...//根据自身项目需要进行的一些自定义操作
getCos().uploadFile({
Bucket: 'examplebucket-1250000000', /* 填写自己的 bucket,必须字段 */
Region: 'COS_REGION', /* 存储桶所在地域,必须字段 */
Key: '1.jpg', /* 存储在桶里的对象键(例如:1.jpg,a/b/test.txt,图片.jpg)支持中文,必须字段 */
Body: file, // 上传文件对象
SliceSize: 1024 * 1024 * 5,
// 上传任务创建时的回调,返回一个taskId,唯一标识上传任务,可用于上传任务的取消/停止/重新开始
onTaskReady: (taskId) => {
eleFile.status = 'uploading'
},
//上传文件的进度回调函数
onProgress: (progressData) => { /* 非必须 */
eleFile.percentage = progressData.percent * 100
},
//文件完成或错误回调
onFileFinish: async (err, data, options) => {
//上传失败
if (err) {
eleFile.status = 'fail'
reject(err)
} else {
//上传成功
eleFile.status = 'success'
//上传成功后的自定义操作,有时上传后的文件我们需要获取来展示
let res = await await fetchSts('xxxx')//需自行实现获取
if (res) {
resolve(res)
}
}
},
// 支持自定义headers 非必须
Headers: {
},
},
)
})
}
调用
在外部的el-upload组件中就可以使用
<script>
export default {
data(){
return {
fileList:[]
}
},
methods:{
async sure(){
for (const file of this.fileList) {
if (file.status !== 'ready') {
continue
}
let res = await uploadEleFile(file)
if (res) {
file.url = res.url
}
}
}
}
}
</script>