写这篇文章之前，我也是刚刚实现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学习笔记（windows git之初体验）
			
    阿里国内镜像地址: https://npm.taobao.org/mirrors/git-for-windows/ 最近在学习廖雪峰老师关于git的教程,链接可以在我的首页找到.首先使用国内镜像下载并 ...
    
			
    2. 
						
  2. BigDecimal精确计算工具类
			
    前言 在实际开发中,遇到例如货币,统计等商业计算的时候,一般需要采用java.math.BigDecimal类来进行精确计算.而这类操作通常都是可预知的,也就是通用的.所以,写了个工具类来方便以后的工 ...
    
			
    3. 
						
  3. .Net Core程序最终只产生1个exe
			
    1.用VS新建一个.Net Core 命令行程序,程序里面写什么都行,我的是这样的 2.打开程序包控制台,或者使用PowerShell等可以执行dotnet命令的工具,把你的.Net 程序发布(编译) ...
    
			
    4. 
						
  4. filter逻辑bug
			
    复合筛选,有个要求是如果筛选条件是空就不传,加了一个逻辑 看着没什么问题,但是存在bug,当重置单一筛选条件时,赋空不能奏效,比如我重置symbol为空,之前是qqq,因为有非空的判断所有并不能奏效导 ...
    
			
    5. 
						
  5. php ftp 使用 以及  php_connect_nonb() failed: Operation now in progress (115)
			
    设置 ftp_pasv($conn,true);  会出现下面错误   不设置 调用ftp 连接没问题  ftp_nlist  ftp_put ftp_get 等函数都不成功 ftp_nb_fput( ...
    
			
    6. 
						
  6. hibernate报错:MappingException: Could not determine type for...解决办法
			
    有时候实体里的一些属性并不想映射到数据库(比方说子级菜单List), 如果不做处理的话会报字段映射错误找不到这列Column Not Found 例如:org.hibernate.MappingExc ...
    
			
    7. 
						
  7. MySQL 8 服务器日志
			
    错误日志: 启动.运行.停止 mysqld(MySQL Server) 遇到的问题 通用查询日志: 建立客户端连接和从客户端接收的语句 二进制日志: 更改数据的语句(也用于复制) 中继日志: 从复制m ...
    
			
    8. 
						
  8. 基于AccessToken方式设计API
			
    目录 数据库设计 实现方案 应用场景:公司A有一平台需要对外提供接口给其他商户使用,考虑到安全性问题,此时可考虑采用AccessToken方案.商户在公司A平台注册一app,平台分配appId.app ...
    
			
    9. 
						
  9. java文件分割及合并
			
    分割设置好分割数量,根据源文件大小来把数据散到子文件中代码如下; package word; import java.io.File; import java.io.FileInputStream;  ...
    
			
    10. 
						
  10. 【JavaScript】JS总结 – 乱
			
    一. 重要:js中的function函数声明.函数表达式 // 函数声明 // Ex: 会在代码执行之前提前加载到作用域中,即js解析器会优先读取,确保在所有代码执行之前声明已经被解析:所以可以在定义 ...
    
			
    11.