admin管理员组文章数量:1565821
需求 :将图片上传到 cos中
1.先引入
npm i cos-js-sdk-v5 --save
2.直接看代码
import { MEDIASOURCE } from '@/api'; //自己后端提供的接口
import COS from 'cos-js-sdk-v5';
/* 封装的方法,直接调用即可 */
export async function upLoadCosFile(file) {
return new Promise(async (resolve, reject) => {
try {
const { data } = await MEDIASOURCE.get_tmp_cos_key(); //查询COS临时秘钥信息
const res2 = await MEDIASOURCE.get_cos_sign(file.name); //获取COS签名,uuid生成的cosKey
var cos = new COS({
// 必选参数
getAuthorization: function (options, callback) {
// 服务端 JS 和 PHP 例子:https://github/tencentyun/cos-js-sdk-v5/blob/master/server/
// 服务端其他语言参考 COS STS SDK :https://github/tencentyun/qcloud-cos-sts-sdk
// STS 详细文档指引看:https://cloud.tencent/document/product/436/14048
callback({
TmpSecretId: data.tmpSecretId,
TmpSecretKey: data.tmpSecretKey,
SecurityToken: data.sessionToken,
// 建议返回服务器时间作为签名的开始时间,避免用户浏览器本地时间偏差过大导致签名错误
StartTime: data.startTime, // 时间戳,单位秒,如:1580000000
ExpiredTime: data.expiredTime, // 时间戳,单位秒,如:1580000900
});
},
});
cos.putObject(
{
Bucket: res2.data.bucketName /* 必须 */,
Region: res2.data.region /* 存储桶所在地域,必须字段 */,
Key: res2.data.cosKey /* 必须 */,
Body: file, // 上传文件对象
},
async function (err, data) {
let obj = {
//自己接口需要用到的参数
cosKey: res2.data.cosKey,
fileName: file.name,
mediaLength: file.size,
};
const media_resource = await MEDIASOURCE.save_media_resource(obj); //保存上传资源属性的接口
resolve(media_resource);
cos = null;
},
);
} catch (error) {
reject(error);
}
});
}
版权声明:本文标题:前端 上传文件照片视频 到cos(腾讯云) 代码实现 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726541482a1074767.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论