发布：2022/12/5 17:23:16作者：管理员 来源：本站 浏览次数：1249
腾讯云 COS JS SDK 地址：https://github.com/tencentyun/cos-js-sdk-v5
步骤：
1、下载腾讯云 COS JS SDK的demo。安装依赖。执行npm i 发现下载不了，按照package.json文件的依赖包 手动下载。 官网里写的很清楚如何配置。例子都放到demo文件夹了。先运行下官网的demo查看下基本配置。自己重新生成了一个test-sh.html。本地访问：http://127.0.0.1:3000/demo/test-sh.html。默认的是3000端口。node启动服务：node server/sts.js 。服务器接口是http://127.0.0.1:3000/sts。
test-sh.html完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/cos-js-sdk-v5.min.js"></script>
<style>
body{
background:#ccc
}
</style>
</head>
<body>
<input id="file-selector" type="file">
<img id="imgupload" src="" alt="">
<img id="img" src="" alt="">
</body>
</html>
<script>
var Bucket = '';//demo必需 腾讯云获取
var Region = '';//demo必需 腾讯云获取
// 初始化实例
var cos = new COS({
getAuthorization: function (options, callback) {
var url = 'http://127.0.0.1:3000/sts'; // 这里替换成您的服务接口地址
// var url = '../server/sts.php'; // 这里替换成您的服务接口地址
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
try {
var data = JSON.parse(e.target.responseText);
} catch (e) {
}
console.log(data)
callback({
TmpSecretId: data.credentials && data.credentials.tmpSecretId,
TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
XCosSecurityToken: data.credentials && data.credentials.sessionToken,
ExpiredTime: data.expiredTime,
});
};
xhr.send();
}
});
// 监听选文件
document.getElementById('file-selector').onchange = function () {
var file = this.files[0];
if (!file) return;
//上传
cos.putObject({
Bucket: Bucket, /* 必须 */
Region: Region, /* 存储桶所在地域，必须字段 */
Key: file.name, /* 必须 */
StorageClass: 'STANDARD',
Body: file, // 上传文件对象
onProgress: function(progressData) {
console.log(JSON.stringify(progressData));
}
}, function(err, data) {
console.log(err || data);
//将来在这里写显示图片
});
};
</script>
2、显示在页面中。需要改两处。
一处是server/sts.js。里面默认没有配置获取图片地址的权限（如果不添加权限，会返回403的错误）。server/sts.js中config的 allowActions 新增'name/cos:GetObjectUrl'权限。
一处是在页面中调用cos.getObjectUrl（获取图片），不是cos.getObject（获取文件） 哦。
//server/sts.js的config的 allowActions 新增'name/cos:GetObjectUrl'
var config = {
secretId: '',//必填 在腾讯云找到云api密钥 改成自己的
secretKey: '',//必填 在腾讯云找到云api密钥 改成自己的
proxy: process.env.Proxy,
durationSeconds: 1800,
bucket: '',//必填 和html的bucket一样 是cos的存储桶信息 都改成自己的
region: '',//必填 和html的region一样 是cos的域名信息 都改成自己的
//allowPrefix: '_ALLOW_DIR_/*',
allowPrefix: '*',
// 密钥的权限列表
allowActions: [
// 所有 action 请看文档 https://cloud.tencent.com/document/product/436/31923
// 简单上传
'name/cos:GetObject',//新加权限 demo里默认没有
'name/cos:GetObjectUrl',//新加权限 demo里默认没有
'name/cos:PutObject',
'name/cos:PostObject',
// 分片上传
'name/cos:InitiateMultipartUpload',
'name/cos:ListMultipartUploads',
'name/cos:ListParts',
'name/cos:UploadPart',
'name/cos:CompleteMultipartUpload'
],
};
//test-sh.html 在上传图片成功后的回调函数里加入如下代码
cos.getObjectUrl({
Bucket: Bucket,
Region: Region,
Key: file.name,
Sign: true
}, function (err, data) {
console.log(err || data.Url);
document.getElementById('imgupload').src=data.Url;
});
3、浏览器打开 上传一张图片后 图片也显示成功了。
当然 如果知道已上传过的图片名称，可以直接请求。
cos.getObjectUrl({
Bucket: Bucket,
Region: Region,
Key: 'music.png',
Sign: true
}, function (err, data) {
console.log(err || data.Url);
document.getElementById('imgupload').src=data.Url;
});
在网上也看到另外一种展示图片的方法，但是个人不推荐。
方法：需要将对象权限变成公有读私有写。
详情链接：https://developers.weixin.qq.com/community/develop/doc/000e04c61347808e6e7660e1f51800
弊端：针对已经上传的图片才能设置。且新传入图片后还需要再次修改。
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4