写这篇文章之前，我也是刚刚实现COS上传和显示图片。我百度了好多相关文章，COS上传图片成功的文章不少，上传后显示图片的文章几乎没有。于是写一篇记录下。
COS上传图片推荐链接：https://blog.csdn.net/qq_41485414/article/details/80134908。这个作者写的很好，我按照他的一步步走，成功实现了上传图片。
这里以腾讯云COS上传为例，记录上传图片和显示图片过程。
腾讯云 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
弊端：针对已经上传的图片才能设置。且新传入图片后还需要再次修改。