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

admin管理员组

文章数量:1666155

对象储存

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

对象储存文档

基本概念

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

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

储存类型

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

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

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

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

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

创建储存桶

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

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

第二步，实名认证

选择个人账户

填写个人身份信息

下一步，扫描二维码授权

手机端授权

点击领取免费产品

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

选择对象存储COS

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

点击0元试用，开通服务

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

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

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

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

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

设置cors规则

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

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

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

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

SDK 文档 （javaScriput SDK）

安装与引入

安装

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

script 引入

<script src="https://unpkg/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/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/document/product/436/7730)

本文标签： 腾讯图片上传对象图片