前端 上传文件/照片/视频 到cos(腾讯云) 代码实现
需求 :将图片上传到 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.com/tencentyun/cos-js-sdk-v5/blob/master/server/
// 服务端其他语言参考 COS STS SDK :https://github.com/tencentyun/qcloud-cos-sts-sdk
// STS 详细文档指引看:https://cloud.tencent.com/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);
}
});
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbabgf
系列文章
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13