網站加速 — 前後端上傳圖片至七牛雲

一、問題來源
平時我們開發網頁的時候，動態圖片都是從後端請求數據，最後再把圖片地址填充到img標籤，但是這樣對於圖片較多的網頁來說就顯得很不友好，加載速度巨慢，用戶體驗極差。爲了提高圖片加載速度，我們就可以把圖片上傳到七牛雲存儲空間，在我們自己的網頁中使用圖片外鏈(而不需要再把圖片上傳到我們自己的服務器)，這樣就可以在打開網頁的瞬間加載完圖片。下面來看看如何使用七牛雲及如何完成圖片上傳、外鏈獲取等流程。

二、使用七牛雲
１、註冊七牛雲賬號，申請存儲空間。
２、解析域名，獲取七牛加速域名（七牛上新建域名－>在阿里雲做cname）。
阿里雲cname例子:

記錄值爲七牛加速域名，主機記錄爲二級域名前綴，比如主機記錄爲image，那麼解析出來就是image.主機名。

３、在個人中心獲取祕鑰，用來配置token。

三、實現圖片上傳及外鏈獲取步驟
1、獲取token（通過接口向後端請求獲取）
2、獲取七牛雲上的加速域名和存儲空間名
3、創建上傳文件的函數
4、獲取上傳文件返回值，返回值即爲圖片外鏈。

四、前後端具體代碼實現
後端配置接口返回token:

// 引入七牛雲
const qiniu = require('qiniu')　

// 後端定義返回touken的接口
router.get('/api/qiniutoken', async ctx => {
  // 鑑權對象 mac
  const accessKey = 'AK'
  const secretKey = 'SK'
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
  const options = {
    scope: '存儲空間名'
    // expires: 7200
  }
  const putPolicy = new qiniu.rs.PutPolicy(options)
  const uploadToken = putPolicy.uploadToken(mac)
  ctx.response.body = { upToken: uploadToken }
})

前端引入相關腳本（這裏腳本我下載下來放在本地了），下載鏈接：https://github.com/ZhaoYLi/qiniu-js

 <script src="/plupload.js" charset="utf-8"></script>
 <script src="/qiniu.js"></script>

前端上傳函數及HTML結構：

<div>
    <button
      id="upImg">上傳</button>
  </div>
  
  //獲取token
  async getToken() {
      await axios.get('/api/qiniutoken').then(res => {
        // console.log('獲取token返回值', res)
        this.upToken = res.data.upToken
      })
      this.uploadImg()
    }
// 上傳函數
uploadImg() {
      Qiniu.uploader({
        runtimes: 'html5,flash,html4',
        browse_button: 'upImg',
        flash_swf_url: 'https://cdn.bootcss.com/plupload/2.1.1/Moxie.swf',
        chunk_size: '4mb',
        uptoken: this.upToken,
        // uptoken_url: '/api/qiniutoken',
        // uptoken_func: function() {
        //   this.getToken()
        // },
        domain: '七牛加速域名',
        get_new_uptoken: false,
        auto_start: true,
        max_retries: 3,
        filters: {
          max_file_size: '10000mb',
          prevent_duplicates: false,
          mime_types: [{ title: 'Image files', extensions: 'jpg,jpeg,gif,png' }]
        },
        init: {
          FilesAdded: (up, files) => {
            console.log('文件就緒', files)
          },
          BeforeUpload: (up, file) => {
            console.log('上傳之前', file)
          },
          UploadProgress: (up, file) => {
            console.log('上傳中 file', file)
            this.progress = file.percent + '%'
          },
          FileUploaded: (up, file, info) => {
            //其中 info 是文件上傳成功後，服務端返回的json
            var domain = up.getOption('domain')
            var res = eval('(' + info + ')')
            var sourceLink = domain + res.key 　//獲取上傳文件的鏈接地址
          },
          Error: (up, err, errTip) => {
            console.log('上傳失敗', err)
          },
          Key: (up, file) => {}
        }
      })
    }

ok，到此就完成了圖片上傳七牛雲，並獲取圖片地址了。最後就可以在我們自己的網站中的img標籤中使用圖片外鏈(上例中的sourceLink)來顯示圖片了。