写这篇文章之前，我也是刚刚实现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. 抽取vs2010安装包中vc++ runtime
			
    写于2015-3-21 16:59 由qq空间转过来,格式有点乱     之前遇到一个问题,c++\cli的程序部署在服务器上面,程序运行后没有反应就退出了,日志管理器中记录两个错误信息分别如下:   ...
    
			
    2. 
						
  2. Dalvik虚拟机和Art虚拟机
			
    Dalvik虚拟机 DVM是Dalvik Virtual Machine的缩写,是Android4.4及以前使用的虚拟机,所有android程序都运行在android系统进程里,每个进程对应着一个Da ...
    
			
    3. 
						
  3. 【python基础语法】多重循环嵌套，函数（第6天课堂笔记）
			
    1.什么是函数?函数有什么作用? 函数都是有特定功能的,都是由一些有特定功能的进行封装完成的 2.已经学过了哪些内置函数?分别有什么作用? print:输出 input:输入 type:查询数据类型  ...
    
			
    4. 
						
  4. Jenkins集成jacoco收集集成测试覆盖率
			
    Jenkins集成jacoco收集集成测试覆盖率 2020-02-28 目录 0 整体思路1 安装版本2 全局工具配置3 Jenkins创建JacocoIntegrateTestDemo项目  3.1 ...
    
			
    5. 
						
  5. java 和js 时间 格式化(yyyy-MM-dd HH:mm:ss) 以及获取当前时间
			
    1.js var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970 ...
    
			
    6. 
						
  6. AE神奇插件TypeMonkey—抖音点赞100W＋的文字视频特效是如何做出来的？
			
    现在最火的东西,短视频必须要拥有姓名啦,抖音这些短视频平台风头正盛,我们也常常在上面看到一些文字动画Vlog,看着并不复杂,但是有些却有上百万的点击量,今天介绍的一款神奇插件——TypeMonkey, ...
    
			
    7. 
						
  7. 安装Kubernetes到CentOS（Minikube）
			
    运行环境 系统版本:CentOS Linux release 7.6.1810 (Core) 软件版本:Docker-ce-18.06.0.Kubectl-1.15.0.Kubernetes-v1.1 ...
    
			
    8. 
						
  8. webservice之Http传输错误问题
			
    1.背景:调用第三方webservice服务,正常调用,但是最近由于第三方更换远程调用地址,并且发布服务器(A)是通过代理的方式请求真实服务器地址(B),于是本以为很简单的将客户端调用地址修改为发布地 ...
    
			
    9. 
						
  9. 理财收益的计算 计算浮点数的n次方 1466
			
    题目描述 老傻非常喜欢购买理财产品,而且这款理财产品被推销人员吹得特别高,对于贪财的老傻来说正中下怀,于是在心里盘算着买了它,自己就是亿万富豪,现需要你编写一个程序,帮老傻计算其收益,老傻的投入是R( ...
    
			
    10. 
						
  10. Email-发送邮件
			
    Email 发送邮件 import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIME ...
    
			
    11.