COS上传图片和显示图片

　　写这篇文章之前，我也是刚刚实现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

　　弊端：针对已经上传的图片才能设置。且新传入图片后还需要再次修改。

posted @ 2020-02-17 22:19 沙漏里的阳光阅读(3898) 评论(0) 收藏举报

刷新页面返回顶部

沙漏里的阳光

COS上传图片和显示图片

公告