---

声明

本篇不介绍怎么把图片上传到七牛云，因为这种介绍资料非常多，七牛云官方文档介绍的也非常详细，

做法也非常简单，本篇不赘述。而且，在本篇的场景种，也不存在通过代码上传图片的做法。

---

需求场景

我在前端本地项目里有一些静态图片资源，原本是放在项目里的，

在项目编译和部署上线后，都会遇到一些不容忽视的问题。

所以，我的设想是，把图片放到七牛云（因为七牛云有免费的10G空间😀），需要图片的时候，

就获取图片地址，交给前端，显示在页面上。

问题

于是，我通过七牛云控制台，把本地图片上传到了存储空间里

紧接着，问题就来了。我发现，私人空间里的图片地址，后面都带俩参数e和token

如果只输入前面的地址，不带上参数（这个在官方文档叫下载凭证），是无法获取到图片的：

于是，问题来了，怎么获取到这个带参数的 完整的图片地址呢？

思路

思路一

既然你说 私人空间必须带参数（下载凭证），那我设置成公开空间不就行了嘛。

设置为公开空间，就不用带参数了。

但是缺点是项目内容成公开资源了。

思路二

你说私人空间要带凭证，那我弄个凭证不就完事儿了么。

根据官方文档的说明，下载凭证不需要自己弄，直接通过官方支持的后端SDK就可以获取。

巧了，官方支持node语言，本篇就用koa2做示例。

在官方文档里找到node SDK的文档，可以看到，官方给了示例，按照示例操作就行。

示例中的变量介绍：

变量accessKey和secretKey ，这俩在七牛云个人中心 – 密钥管理里面可以找到。

这俩变量可以认为是证明你是七牛云的某个用户。

变量key和privateBucketDomain， 前者key是图片的路径，后者privateBucketDomain是外链域名，

比如这张图片http://rjmiz4186.hd-bkt.clouddn.com/chirp/mua.gif

对应的key就是chirp/mua.gif，

对应的privateBucketDomain就是http://rjmiz4186.hd-bkt.clouddn.com

变量deadline表示令牌有效期，单位是秒

代码演示

假如我现在要获取到红框内的这张图片链接

后端koa2操作步骤：

安装七牛云：

npm i qiniu

routes里的接口文件里：

引入：

const qiniu = require('qiniu');

写测试接口：

/**
 * 测试七牛云 获取图片地址
 */
router.get('/testqiniu', async (ctx, next) => {

  // 下面这段直接cp文档中的示例，改一下变量值即可
  var accessKey = '我的accessKey';
  var secretKey = '我的secretKey';
  var key = 'chirp/mua.gif'; // 图片路径，注意，最前面没有/
  var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  var config = new qiniu.conf.Config();
  var bucketManager = new qiniu.rs.BucketManager(mac, config);
  var privateBucketDomain = 'http://rjmiz4186.hd-bkt.clouddn.com'; // 外链域名
  var deadline = parseInt(Date.now() / 1000) + 3600; // 1小时过期
  var privateDownloadUrl = bucketManager.privateDownloadUrl(privateBucketDomain, key, deadline);

  ctx.body = {
    code: '0000',
    message: 'ok',
    data: privateDownloadUrl
  }
})

前端通过调用接口，获取到后端返回的图片地址：

/**测试七牛云 */
  useEffect(() => {
    const getUrl = async () => {
      const res = await request('/testqiniu');
      console.log('res: ', res)
    }
    getUrl();
  }, [])

查看返回结果：

在浏览器中打开地址查看：

---

帮助文档

• 七牛地址： https://portal.qiniu.com/home
• 七牛SDK：https://developer.qiniu.com/kodo/1289/nodejs#6

---