写这篇文章之前，我也是刚刚实现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. 树莓派点亮LED灯需要几行代码？3行。小孩子都能学会
			
    目录 点亮LED灯 硬件连接 代码 闪烁的LED灯 呼吸灯 其他 点亮LED灯 硬件连接 找一个LED灯,连接如上图,注意长短引脚,经过这些年的狂轰乱炸,大家对于这个应该不漠视,毕竟Arduino都进 ...
    
			
    2. 
						
  2. css选择器四大类：基本、组合、属性、伪类
			
    什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器.属性选择器.组合选择器与伪类选择器四个大类! css基本选择器 基本选择器又分为:*通配符.标 ...
    
			
    3. 
						
  3. LINUX下EFIBOOTMGR的使用,删除UEFI主板多余启动项和添加启动项
			
    用uefi装了几次次archlinux,搞的uefi启动选项下多出来好多启动项..这东西重格硬盘也是不好用的.发现以下方法可以解决. efibootmgr   //显示efi的启动项 删除一个引导项  ...
    
			
    4. 
						
  4. 硬件知识整理part3--电阻在单片机系统中的应用
			
    邦有道,如矢:邦无道,如矢.  --孔子 电阻在电路中主要功能是限流和分压等等.在单片机系统中自然也是. 电阻作为限流应该是最常用的应用之一,对于单片机外围设计来说,电阻的应用非常重要,在很多时候,我 ...
    
			
    5. 
						
  5. MySQL和MariaDB安全初始化
			
    通过yum安装mysql(5.x)后往往需要进行一些安全类的初始化设置: 安装完数据库后执行mysql_secure_installation命令,会出现安全相关的交互界面. 按提示操作.
    
			
    6. 
						
  6. JS中require函数的警告提示
			
    在JS中常常使用require函数来引入文件或者路径,不过在使用时需要注意一点,它的参数必须是一串完整的字符串常量或者是由字符常量与变量拼接. (一)require函数的参数为一个变量,如下图所示:  ...
    
			
    7. 
						
  7. STL-map/multimap 简述
			
    #include <iostream> #include <cstdio> #include <map> using namespace std; int main ...
    
			
    8. 
						
  8. 【database】复制表数据到相同备份表
			
    目的及由来,因为数据库表都采取逻辑删除isDeleted=true/flase,但是之前有些报表或者其他的sql并没有在sql中指明此条件.为了不影响之前代码,所以: 1.数据库中创建一张相同的表,把 ...
    
			
    9. 
						
  9. 备战2020年金三银四，看这一篇面试文章就够了（合适各级Java人员）
			
    本文不是原创.为整理所得!但是内容是很干货的!我看了也有帮助.做个分享. 企业开始上班,就意味着大批量的招聘需求正在路上.在即将到来的金三银四跳槽面试季,提前祝贺大家拿到大厂offer.前程似锦.前程 ...
    
			
    10. 
						
  10. Linux X_window与文本模式的切换
			
    用x_window启动的情况下的切换方法: [Ctrl] + [Alt] + [F1] ~ [F6]  :文字接口登陆 tty1 ~ tty6 终端机: [Ctrl] + [Alt] + [F7]   ...
    
			
    11.