Where is JavaScript?

利用腾讯云对象存储和CDN构建博客图床

本人的博客后端和域名解析服务目前都部署在腾讯云上,因此考虑将博客图床从七牛云转到腾讯云上来

准备工作

  • CDN加速域名,划分了二级域名static.littlewin.wang
  • 腾讯云账户通过实名审核
  • 少量充值,个人博客日常访问量少,产生的CDN服务费用也很少,少量充值以防欠费停止服务

配置CDN

  1. 前往腾讯云静态内容加速页面开启服务
  2. 添加域名
  3. 配置域名CNAME

以上过程可参考快速使用CDN

配置对象存储

开启服务

  1. 前往腾讯云COS页面开启服务
  2. 添加Bucket(根据自身情况选择节点,如需CDN加速,则勾选开启CDN加速)

基础配置

选择刚才新建的Bucket,进入基础配置栏

  1. 基本信息
    有需要可以改变访问权限
  2. 防盗链设置
    设置对应的黑/白域名名单来控制使用资源URL的权限
  3. 回源设置
    如有数据的热迁移和特定请求的重定向等需求
  4. 跨域访问CORS设置
    本人的博客后台管理需要集成腾讯云js SDK,此处需做相应配置https://static.littlewin.wang/blog/26-1.png
  5. 静态网站

域名管理

  1. 开启加速域名
  2. 添加自定义域名(上一步在CDN配置中加入的域名)

以上配置可以参考产品文档域名管理
完成以上配置后,已经可以通过对象存储控制台上传/查看文件信息,并通过加速域名访问相应对象。

密钥管理

前往密钥管理查询个人的腾讯云API密钥信息

              
  • 1
  • 2
  • 3
  • 4
  • 5
{ "SecretId": "xxxxxxxxxxxxxxxxxx", "SecretKey": "xxxxxxxxxxxx", "APPID": "1251xxxxxxx" }

SDK集成

腾讯云针对不同平台,不同应用开发出了相应的SDK,因为我的后台管理页面需要运行上线,所以选择了cos-js-sdk-v5

生成密钥配置文件

暂时将腾讯云密钥存储在后台Server,通过加token的前端请求访问到相应密钥信息

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
"config": { "AppId": "1251xxxxx", "SecretId": "AKIDxxxxxxxxxxxxxx", "SecretKey": "zjCQxxxxxxxxx", "Region": "ap-guangzhou", "Bucket": "blog", "prefixURL": "https://static.littlewin.wang/" }

新建COS访问接口

在项目中引用cos-js-sdk-v5模块

              
  • 1
npm install cos-js-sdk-v5 -S

根据配置文件初始化访问接口实例/utils/qcloud.js

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
const COS = require('cos-js-sdk-v5') module.exports = (config) => { let getAuthorization = (options, callback) => { var authorization = COS.getAuthorization({ SecretId: config.SecretId, SecretKey: config.SecretKey, Method: options.Method, Key: options.Key }) callback(authorization) } return new COS({ // 必选参数 AppId: config.AppId, getAuthorization }) }

上传

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
const cos = require('@/utils/qcloud') let cosAPI = cos(this.qcloudToken) cosAPI.putObject({ Bucket: this.qcloudToken.Bucket, Region: this.qcloudToken.Region, Key: this.qcloudToken.Bucket + '/' + data.gravatar.split('/').reverse()[0], // 文件主键, 访问时通过cdn域名 + 文件主键作为URL路径 Body: this.b64toBlob(this.avatarData.replace(/^data:image\/\w+;base64,/, '')) // 页面前端显示图片采用了base64编码,上传时需要转换为Blob格式 }, (err, data) => { if (err) { // 错误处理 } else { // 正常处理 } })

踩到的坑

对象存储的跨域访问设置

一定要设置Allow_headers,这一项为空时后台请求反馈的信息还是

              
  • 1
No 'Access-Control-Allow-Origin' header is present on the requested resource.

而我在一开始就已经配置了origin: *,所以就以为这个配置的生效时间有延迟,等了很久才发工单确认了此设置是即时生效。
我也在工单中提了建议,希望鹅厂的后台们能优化一下接口的回传信息。

本文于 2017-11-7  发布在  编程  分类下, 当前已被围观 1127 次

并被添加「 前端JavaScript 」标签

本站使用「 署名 4.0 国际」创作共享协议