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




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


											
COS上传图片和显示图片的更多相关文章
	

    
								
  1. springmvc上传图片并显示图片--支持多图片上传
		
    实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>comm ...
    
		
    2. 
						
  2. javaweb中上传图片并显示图片，用我要上传课程信息（里面包括照片）这个例子说明
		
    原理:  从客户端上传到服务器                照片——文件夹——数据库 例如:桌面一张照片,在tomacat里创建upload文件夹,把桌面照片上传到upload文件夹里,并且把照片的 ...
    
		
    3. 
						
  3. input[type="file"]上传图片并显示图片
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    4. 
						
  4. common-fileupload上传图片并显示图片
		
    效果图如下:                                   代码: 注意:需要jar包:commons-fileupload-1.2.1.jar  和 commons-io-1. ...
    
		
    5. 
						
  5. Java web项目 上传图片保存到数据库，并且查看图片，（从eclipse上移动到tomact服务器上，之路径更改，包括显示图片和导出excel）
		
    //项目做完之后,在本机电脑运行完全正常,上传图片,显示图片,导出excel,读取excel等功能,没有任何问题,但是,当打成war包放到服务器上时,这些功能全部不能正常使用. 最大的原因就是,本机测 ...
    
		
    6. 
						
  6. 02-20 winform 上传图片并读取图片
		
    建立一个windows窗体应用程序,在form1界面中拖入两个按钮和一个pictureBox,通过输入输出流来上传图片和显示图片.需要添加一下openFileDialog1. 界面如下: 在cs中写上 ...
    
		
    7. 
						
  7. 关于百度world 编辑器改变上传图片的保存路径图片不显示的问题
		
    在ueditor.mini for asp.net 中,将上传的图片保存的路径更改了,可图片在 world 编辑器中不显示,但却可以上传到指定的保存目录下,解决这个问题的方法 是: 在udditor_ ...
    
		
    8. 
						
  8. 基于ASP.Net +easyUI框架上传图片，实现图片上传，提交表单
		
    <body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" typ ...
    
		
    9. 
						
  9. 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器
		
    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 9maven依赖传递性、依赖原则
			
    maven的依赖传递: A.jar->B.jar->C.jar 要使 A.jar ->C.jar:当且仅当 B.jar 依赖于C.jar的范围是compile,如果B依赖于C的范围不 ...
    
			
    2. 
						
  2. HTML连载67-手风琴效果、2D转换模块
			
    一.手风琴效果 <style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto;  ...
    
			
    3. 
						
  3. Charles证书下载报Name lookup failed
			
    背景 1.charles https抓包需要在手机上安装证书. 2.近期疫情影响,通过openVPN远程办公. 问题现象 按照网上教程配置好charles proxy配置,证书安装的时候,iPhone ...
    
			
    4. 
						
  4. centos7安装opencv3.4.1（同样适用于最新版本4.2.0）
			
    安装cmake3: echo '[group_kdesig-cmake3_EPEL]name=Copr repo for cmake3_EPEL owned by @kdesigbaseurl=htt ...
    
			
    5. 
						
  5. lucas定理及其拓展的推导
			
    lucas定理及其拓展的推导 我的前一篇博客-- lucas定理 https://mp.csdn.net/mdeditor/100550317#主要是给出了lucas的结论和模板,不涉及推导. 本篇文 ...
    
			
    6. 
						
  6. awk - 提取包含某个关键字的段落
			
    前提 AWK是一种处理文本文件的语言,是一个强大的文本分析工具. 本文将使用命令awk将具有某个关键字的段落提取出来. 准备数据 "Finalizer" #3 daemon pri ...
    
			
    7. 
						
  7. input清空和重置select下拉框
			
    背景 一般页面搜索条件都会有input输入框和select选择框,同时页面上都会有重置reset按钮,这时就需要清空input和重置select 实现 清空input 清空单个input: $(&qu ...
    
			
    8. 
						
  8. Python2与Python3比较
			
    1.print 函数 1. print语句没有了,取而代之的是print()函数. Python 2.6与Python 2.7部分地支持这种形式的print语法. 2.Unicode 1.  在pyt ...
    
			
    9. 
						
  9. caj文件转word
			
    转载:https://baijiahao.baidu.com/s?id=1590365105855177484&wfr=spider&for=pc 使用工具: 迅捷caj转word转换 ...
    
			
    10. 
						
  10. shell awk学习3
			
    需求: 某文件aa的内容如下: a/p1/p2b/pp1c/ppp1/ppp3d/p1/p2/p3e/p1/p2/p3/p4 期望输出结果: a /p1 /p2 b /pp1 c /ppp1 /ppp ...
    
			
    11.