腾讯云存储

腾讯云存储

注册登录领取免费试用的云存储

1. 第一步，我们必须先拥有一个腾迅云的开发者账号

2. 第二步，实名认证
   

3. 填写个人身份信息
   

4. 扫描二维码授权
   

5. 点击领取免费产品
   

6. 选择对象存储COS
   

7. 开启试用
   

8. 我们需要来创建一个存储图片的存储桶
   

9. 选择配置设置公有读私有写
   

10. 配置跨域问题
    

11. 因为我们本身没有域名，所以这里设置成*****，仅限于测试，正式环境的话，这里需要配置真实的域名地址
    在我们发布以后要更改成自己的域名，以免被攻击

2、在代码中如何使用

2.1、在生产环境中试用（js为例）

2.1.1、上传图片到云存储

1、初始化cos对象参数

名称	描述
SecretId	开发者拥有的项目身份识别 ID，用以身份认证，可在 API 密钥管理 页面获取
SecretKey	开发者拥有的项目身份密钥，可在 API 密钥管理 页面获取

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

2、实例化 上传sdk

var cos = new COS({
    SecretId: 'COS_SECRETID', // 身份识别 ID，id是你自己的id
    SecretKey: 'COS_SECRETKEY', // 身份密钥，秘钥是自己的秘钥
});

当然在这里上传sdk的时候我们首先安装一下 SDK

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

3、上传图片
在这里我是用了elementUi组件库里面的图片上传，使得再上传图片的时候很轻松
4、当我点击上传图片的时候会调用组件里面的钩子函数从而获取到图片的信息，上传动作为el-upload的http-request属性

5、开始上传到云

// 进行上传操作
    upload(params) {
    //   console.log(params.file)
      if (params.file) {
        // 执行上传操作
        cos.putObject({
          Bucket: 'shuiruohanyu-106-1302806742', // 存储桶
          Region: 'ap-beijing', // 地域
          Key: params.file.name, // 文件名
          Body: params.file, // 要上传的文件对象
          StorageClass: 'STANDARD' // 上传的模式类型 直接默认 标准模式即可
          // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
        }, function(err, data) {
          // data返回数据之后 应该如何处理
          console.log(err || data)
        })
      }
    }

Bucket是你自己储存桶的名字，Region是你自己的地域名

6、查看是否上传成功
如果上传成功我们的控制台会有输出

删除云图片

删除云图片和存储云图片的步骤是差不多的

1、同样适用elementUi里面的上传图片的组件before-remove这个钩子函数
2、删除云图片

removeFile (file, fileList) {
      cos.deleteObject({
        Bucket: 'lhyss-1305903759', /* 必须 */
        Region: 'ap-nanjing',     /* 存储桶所在地域，必须字段 */
        Key: file.name        /* 必须 */
      }, (err, data) => {
        if (err) return
        if (data.statusCode == 204) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.showPercent = false
        }
      });
    }

删除成功

具体关于操作可看腾讯云官方文档