腾讯云对象储存-图片上传-删除图片

对象储存对象存储是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。对象储存文档基本概念下面通过几个名词概念，帮助您进一步了解腾讯云对象存储 COS：存储桶（bucket）：是对象的载体，可理解为存放对象的“容器”。一个存储桶可容纳无数个对象。对象（Object）：是对象存储的基本单元

独滕

1816人浏览 · 2021-05-14 16:31:59

独滕 · 2021-05-14 16:31:59 发布

对象储存

对象存储是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。

对象储存文档

基本概念

下面通过几个名词概念，帮助您进一步了解腾讯云对象存储 COS：

存储桶（bucket）：是对象的载体，可理解为存放对象的“容器”。一个存储桶可容纳无数个对象。
对象（Object）：是对象存储的基本单元，可理解为任何格式类型的数据，例如图片、文档和音视频文件等。
地域（Region）：是腾讯云托管机房的分布地区，对象存储 COS 的数据存放在这些地域的存储桶中。
访问域名（Endpoint）：对象被存放到存储桶中，用户可通过访问域名访问和下载对象。

储存类型

存储类型可体现对象在 COS 中的存储级别和活跃程度。COS 提供多种对象的存储类型：标准存储、低频存储、归档存储、深度归档存储。每种存储类型拥有不同的特性，

标准存储：标准存储适用于高频、高性能访问的数据，无最少存储时间限制与数据取回费用

低频存储：低频存储适用于不频繁访问的数据，最少存储 30 天，收取较低的数据取回费用

归档存储：归档存储适用于极少访问的数据，最少存储 90 天，收取较高的数据取回费用

深度归档存储：深度归档适用于1年内仅访问1~2次的数据，最少存储 180 天，收取较高的数据取回费用。

创建储存桶

第一步，我们必须先拥有一个腾迅云的开发者账号(小心腾讯云的广告电话)

请按照腾讯云的注册方式，注册自己的账号

第二步，实名认证

选择个人账户

填写个人身份信息

下一步，扫描二维码授权

手机端授权

点击领取免费产品

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EogV8y7x-1620981067868)(http://blog.daqitc.net/vue/vue-admin-tempate/assets/image-20200805201513338.png)]

选择对象存储COS

我们免费拥有**6个月的50G流量**的对象存储空间使用权限，足够我们上传用户头像的使用了

点击0元试用，开通服务

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWblaQFH-1620981067870)(http://blog.daqitc.net/vue/vue-admin-tempate/assets/image-20200805201750662.png)]

到这一步，账号的部分就操作完毕，接下来，我们需要来创建一个存储图片的存储桶

登录对象存储控制台，创建存储桶。设置存储桶的权限为 公有读，私有写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JOa4Mpyq-1620981067871)(http://blog.daqitc.net/vue/vue-admin-tempate/assets/image-20200806135409338.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2avyI0qL-1620981067872)(http://blog.daqitc.net/vue/vue-admin-tempate/assets/image-20200916231600661.png)]

设置cors规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JzZksLSU-1620981067873)(http://blog.daqitc.net/vue/vue-admin-tempate/assets/image-20200916231949174.png)]

AllowHeader 需配成*，如下图所示。

因为我们本身没有域名，所以这里设置成*****，仅限于测试，正式环境的话，这里需要配置真实的域名地址

到这里，我们的腾讯云存储桶就设置好了。

SDK 文档（javaScriput SDK）

安装与引入

安装

您可以通过以下方式安装 SDK：

script 引入

<script src="https://unpkg.com/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>

在 script 标签引用 SDK 时，SDK 占用了全局变量名 COS，通过它的构造函数可以创建 SDK 实例。

npm安装

$ npm i cos-js-sdk-v5 --save

引入

import COS from 'cos-js-sdk-v5'

var COS = require('cos-js-sdk-v5');

初始化cos对象

相关参数：

参数名	参数描述	类型	是否必填
SecretId	用户的 SecretId	String	否
SecretKey	用户的 SecretKey，建议只在前端调试时使用，避免暴露密钥	String	否
FileParallelLimit	同一个实例下上传的文件并发数，默认值3	Number	否
ChunkParallelLimit	同一个上传文件的分块并发数，默认值3	Number	否
getAuthorization	获取签名的回调方法，如果没有 SecretId、SecretKey 时，这个参数必选	Function	否
Timeout	超时时间，单位毫秒，默认为0，即不设置超时时间	Number	否

getAuthorization 的回调参数说明：

参数名	参数描述	类型
options	获取临时密钥需要的参数对象	Object
- Bucket	存储桶的名称，命名格式为 BucketName-APPID，此处填写的存储桶名称必须为此格式	String
- Region	存储桶所在地域，枚举值请参见	String
callback	临时密钥获取完成后的回传方法	Function

获取完临时密钥后，callback 回传一个对象，回传对象的属性

属性名	参数	类型	是否必填
TmpSecretId	获取回来的临时密钥的 tmpSecretId	String	是
TmpSecretKey	获取回来的临时密钥的 tmpSecretKey	String	是
XCosSecurityToken	获取回来的临时密钥的 sessionToken，对应 header 的 x-cos-security-token 字段	String	是
StartTime	密钥获取的开始时间，即获取时刻的时间戳，单位秒，startTime，如：1580000000，用于签名开始时间，传入该参数可避免前端时间偏差签名过期问题	String	否
ExpiredTime	获取回来的临时密钥的 expiredTime，超时时刻的时间戳，单位秒，如：1580000900	String	是

初始化实例代码

<input id="file-selector" type="file">
<script src="dist/cos-js-sdk-v5.min.js"></script>
<script>
var Bucket = 'examplebucket-1250000000';
var Region = 'COS_REGION';     /* 存储桶所在地域，必须字段 */
// 初始化实例
var cos = new COS({
  getAuthorization: function (options, callback) {
      // 异步获取临时密钥
      $.get('http://example.com/server/sts.php', {
          bucket: options.Bucket,
          region: options.Region,
      }, function (data) {
          var credentials = data && data.credentials;
          if (!data || !credentials) return console.error('credentials invalid');
          callback({
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              XCosSecurityToken: credentials.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
              StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
          });
      });
  }
});
// 接下来可以通过 cos 实例调用 COS 请求。
// TODO
</script>

在本次练习中是直接将参数放置在前端代码中存储，但是腾讯云本身是不建议这么做的，因为**敏感信息**放在前端很容易被捕获，由于我们本次是测试研发，所以这个过程可以忽略，正确的做法应该是，通过网站调用接口换取敏感信息

实例化代码：

var cos = new COS({
    SecretId: 'COS_SECRETID', // 身份识别 ID
    SecretKey: 'COS_SECRETKEY', // 身份密钥
});

对象操作

简单上传对象

PUT Object 接口可以上传一个对象至指定存储桶中。该操作需要请求者对存储桶有 WRITE 权限。Key（文件名）不能以/结尾，否则会被识别为文件夹。

实例：

cos.putObject({
   Bucket: 'examplebucket-1250000000', /* 必须 */
   Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
   Key: 'exampleobject',              /* 必须 */
   StorageClass: 'STANDARD',
   Body: fileObject, // 上传文件对象
   onProgress: function(progressData) {
       console.log(JSON.stringify(progressData));
   }
}, function(err, data) {
   console.log(err || data);
});

创建目录：

cos.putObject({
   Bucket: 'examplebucket-1250000000', /* 必须 */
   Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
   Key: 'examplefolder/',              /* 必须 */
   Body: '',
}, function(err, data) {
   console.log(err || data);
});

上传文件到指定目录：

var folder = 'examplefolder/';
cos.putObject({
  Bucket: 'examplebucket-1250000000', /* 必须 */
  Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
  Key: folder + 'exampleobject',              /* 必须 */
  Body: fileObject, // 上传文件对象
  onProgress: function(progressData) {
      console.log(JSON.stringify(progressData));
  }
}, function(err, data) {
  console.log(err || data);
});

putObject参数：

参数名	参数叙述	类型	是否必须
Bucket	存储桶的名称，命名格式为 BucketName-APPID，此处填写的存储桶名称必须为此格式	String	是
Region	存储桶所在地域，	String	是
Key	对象键（Object 的名称），对象在存储桶中的唯一标识。	String	是
Body	上传文件的内容，可以为字符串，File 对象或者 Blob 对象	String\File\Blob	是
StorageClass	设置对象的存储类型，枚举值：STANDARD、STANDARD_IA、ARCHIVE、DEEP_ARCHIVE 等，默认值：STANDARD。	String	否
onProgress	进度的回调函数，进度回调响应对象（progressData）属性如下	Function	否

回调函数说明：

参数名	参数描述	类型
err	请求发生错误时返回的对象，包括网络错误和业务错误。如果请求成功则为空	Object
data	请求成功时返回的对象，如果请求发生错误，则为空	Object

练习中的上传代码

var cos = new COS({
    SecretId: 'AKIDHMBnAH6evve7JFvKRHq8AvSkmX2FCrFc',
    SecretKey: '8zZsue7LIyNVNyHJ5bqoWx70cy3rNdcK'
})
var folder='5-13/'
methods: { 

upload (params) {
      if(params.file) {
        cos.putObject({
          Bucket: 'vue-element-1305776833', // 存储桶
          Region: 'ap-nanjing', // 地域
          Key: folder + params.file.name, // 文件名
          Body: params.file, // 要上传的文件对象
          StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
          // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件 格式 名称 回调
          // 进度条
          onProgress: (params) => {
            this.percent = params.percent * 100
          }
        },(err,data) => {
          // data返回数据之后 应该如何处理
          console.log(err||data)
          this.showPercent = false
          this.fileList = this.fileList.map(item => {
            // console.log(item)
            if(item.uid === this.currentImageUid) {
              return { url: 'http://'+data.Location, name: item.name }
            }
            return item
          })
          // console.log(this.fileList)
        })
      }
    }
    
}

删除头像（删除单个对象）

DELETE Object 接口请求可以在 COS 的存储桶中将一个对象删除。该操作也需要请求者对存储桶有 WRITE 权限。

实例：

cos.deleteObject({
   Bucket: 'examplebucket-1250000000', /* 必须 */
   Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
   Key: 'exampleobject'        /* 必须 */
}, function(err, data) {
   console.log(err || data);
});

参数：

参数名	参数描述	类型	是否必填
Bucket	存储桶的名称，命名格式为 BucketName-APPID，此处填写的存储桶名称必须为此格式	String	是
Region	存储桶所在地域，	String	是
Key	对象键（Object 的名称），对象在存储桶中的唯一标识，	String	是
VersionId	要删除的对象版本 ID 或 DeleteMarker 版本 ID	String	否

回调函数参数：

参数名	参数描述	类型
err	请求发生错误时返回的对象，包括网络错误和业务错误。如果请求成功则为空，	Object
data	请求成功时返回的对象，如果请求发生错误，则为空	Object

练习中的代码

var cos = new COS({
    SecretId: 'AKIDHMBnAH6evve7JFvKRHq8AvSkmX2FCrFc',
    SecretKey: '8zZsue7LIyNVNyHJ5bqoWx70cy3rNdcK'
})
var folder='5-13/'
methods: { 
    
	headleRemove (file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      // console.log(file)
      cos.deleteObject({
        Bucket: 'vue-element-1305776833', // 存储桶
          Region: 'ap-nanjing', // 地域
          Key: folder + file.name, // 文件名
      }), (err, data) => {
        console.log(err || data)
        // this.$message.success(err || data)
      }
    }

}

e.log(file)
cos.deleteObject({
Bucket: ‘vue-element-1305776833’, // 存储桶
Region: ‘ap-nanjing’, // 地域
Key: folder + file.name, // 文件名
}), (err, data) => {
console.log(err || data)
// this.$message.success(err || data)
}
}

}




### [错误码详情列表](https://cloud.tencent.com/document/product/436/7730)

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

腾讯云开发者社区

数据库实验二数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s

腾讯云开发者社区

Spring Boot Mybatis数据库datasource多数据源配置

application.yaml文件配置spring:datasource:db1:driver-class-name: com.mysql.cj.jdbc.Driverjdbc-url: jdbc:mysql://192.168.0.1:3306/ellassay_dev?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBe