开发后台管理系统时需要用到CDN,选择了七牛云，记录一下使用方法

准备工作

注册

注册七牛云并实名认证（我好像没有实名认证也可以）

创建对象存储空间

唯一的存储空间名字（bucketName）存储区域（决定域名）后面都会用到

访问控制用的是公开（GET不需要token，POST/PUT/DELETE都还是需要的）

查看密钥

AccessKey（公钥）和SecretKey（私钥）后面都会用到

总结：三个东西会使用到：对象存储名+公私钥对

使用

服务端

安装SDK

后端使用node，七牛有对应的SDK

在七牛开发者文档中可以找到

生成文件名（fileName）

npm安装npm install qiniu使用(其他语言的SDK按对应方法安装)，此外还需要一个加密算法，转换文件名，这里是sha1

const qiniu = require('qiniu')
const sha1 = require('sha1')

收到请求后处理生成的文件名

const fileName = `${sha1(req.query.fileName)}.${req.query.fileName.split('.').pop()}`

比如文件名是demoimg.jpg，上面的算法会将demoimg.jpg的哈希值(一段16进制数字符串，不会有. ）和jpg后缀用一个.拼接在一起

生成凭证（uploadToken）

定义对象存储名和公私钥对

// 公钥
const accessKey = 'jfmzlXuFgqdSBC3S8o2gsxmYe-'（示例而已，删了一些）
// 私钥
const secretKey = 'sQOcZ9YUKYLO2EMTQWRVtV-1v'（示例而已，删了一些）
// 存储空间名
const bucketName = 'ahubkuhb'

会使用SDK中的 PutPlicy和Mac

Mac是钥匙，拿到“钥匙”的人才有这个权限，用到了准备工作中的公私钥对

    var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

PutPolicy限制权限的范围；参数中，scope中bucketName是必选项，fileName是覆盖上传的选填项（覆盖相同的名字的文件，如果选了这一项要保证 客户端上传时文件名字 和 这里填写的名字 也是一样的）；expires是钥匙的有效期，3600s，一个小时；returnBody自定义客户端上传到七牛云之后返回数据的格式（可以不写，默认是key和hash，key就是上面的fileName）

    const putPolicy = new qiniu.rs.PutPolicy({
      scope: `${bucketName}:${fileName}`,
      expires: 3600,
      returnBody: '{"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket  )","name":"$(x:name)"}'
    })

最后生成uploadToken

    const uploadToken = putPolicy.uploadToken(mac)

返回给客户端

返回内容中一定要包含fileName和uploadToken

客户端

前端使用的是vue和element的upload组件

组件是用表单提交的方式封装的，图片的上传地址（指的七牛云服务器不是业务服务器）只有和最后图片的url并不相同（CDN域名）

action中写上传地址

（我的对象存储是选的华南）

返回给后端的是CDN域名

最后图片的url是CDN域名，（在七牛云对象存储->空间管理->CDN测试域名中可以看到）

图片上传到七牛云，会有返回值（后端在putPolicy中写的）其中key是文件名（后端写的fileName)

最后把CDN域名+key拼接起来传给后端就是最后图片的url了

七牛云+element上传组件使用记录