写这篇文章之前，我也是刚刚实现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. Git的基本使用 -- 文件的添加、撤销、对比、删除
			
    显示当前工作区.暂存区.仓库的状态 git status 当工作区的所有文件都提交到仓库,并和仓库保持一致时 有修改的文件时,会显示有改动的文件,并提示如何提交这些修改 添加到暂存区,还未提交到仓库时 ...
    
			
    2. 
						
  2. javaweb垃圾分类查询系统源码 ssm+mysql
			
    需求 基于SSM实现一个垃圾分类查询管理系统, 用户可以根据自定义查询分类信息, 管理员可以对分类信息, 垃圾详情信息进行增删改查的管理 运行环境 jdk1.8,tomcat8.5,mysql5.6, ...
    
			
    3. 
						
  3. 【redisson】分布式锁与数据库事务
			
    场景: 用户消耗积分兑换商品. user_point(用户积分): id point 1 2000 point_item(积分商品): id point num 101 200 10 传统的contr ...
    
			
    4. 
						
  4. CF #623 div.2
			
    序 话说,总有人认为我是黑别人电脑的(雾??其实,我不黑电脑,我黑手机. T1 此题巨水,比较四个面积就就好了.. /* make by ltao */ #include <iostream&g ...
    
			
    5. 
						
  5. Java与Go语言差异1 传值还是传引用
			
    在Java中,复杂类型(除原始类型外的其它类)作为入参,在方法中被修改后,跳出方法对象内的值仍会保持,也就是传的是引用.原始类型传的是值,如int, double等原始类型. Java代码: publ ...
    
			
    6. 
						
  6. 令人抓狂的redis和rediscluster Python驱动包的安装
			
    本文环境:centos 7,Python3编译安装成功,包括pip3,然后需要安装redis相关的Python3驱动包,本的redis指redis包而非redis数据库,rediscluster类似. ...
    
			
    7. 
						
  7. opencv —— copyMakeBorder 扩充图像边界
			
    扩充图像边界:copyMakeBorder 函数 在图像处理过程中,因为卷积算子有一定大小,所以就会导致图像一定范围的边界不能被处理,这时就需要将边界进行适当扩充. void copyMakeBord ...
    
			
    8. 
						
  8. 自用浏览器的 User-agent 表
			
    浏览器版本号见请求. 浏览器 User-agent Internet Explorer Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11. ...
    
			
    9. 
						
  9. Gin框架之文件上传
			
    一.单文件上传 前端代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>上传文 ...
    
			
    10. 
						
  10. 理解Android线程创建流程
			
    copy from : http://gityuan.com/2016/09/24/android-thread/ 基于Android 6.0源码剖析,分析Android线程的创建过程 /androi ...
    
			
    11.