配置七牛雲上傳圖片

配置七牛雲上傳圖片

• 在七牛雲/對象存儲/空間管理下,新建空間,記下空間名
• 進入新建空間,打開域名管理,綁定自己的域名如(img.xxxx.com)
• 進入管理域名的地方添加域名解析,記錄類型選擇CNAME
• 選擇熟悉的語言,安裝sdk,書寫token獲取接口
  php composer.phar require qiniu/php-sdk
  

    /**
     * 獲取七牛token
     * @return Json
     */
    public function getToken()
    {
        $accessKey = '<AK>';
        $secretKey = '<SK>';
        $bucket = '<空間名>';
        // 生成上傳Token
        $auth = new Auth($accessKey, $secretKey);
        $token = $auth->uploadToken($bucket);
        return $this->json_responce(['token' => $token]);
    }

• 前臺獲取接口上傳圖片,然後返回鏈接

  data () {
    return {
      imageUrl: '',
      // 七牛雲的上傳地址，根據自己所在地區選擇，我這裏是華南區
      domain: 'https://upload-z2.qiniup.com',
      // 這是七牛雲空間的外鏈默認域名
      qiniuaddr: 'img.xxxx.com'
    }
  },

    upqiniu (req) {
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      let filetype = ''
      if (req.file.type === 'image/png') {
        filetype = 'png'
      } else {
        filetype = 'jpg'
      }
      // 重命名要上傳的文件
      const keyname = 'caorui' + new Date().getTime() + Math.floor(Math.random() * 100) + '.' + filetype
      // 從後端獲取上傳憑證token
      this.apiGet('tool/img/getToken/', this.id, this.form).then(res => {
        const formdata = new FormData()
        formdata.append('file', req.file)
        formdata.append('token', res.data.token)
        formdata.append('key', keyname)
        // 獲取到憑證之後再將文件上傳到七牛雲空間
        axios.post(this.domain, formdata, config).then(res => {
          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
        })
      })
    },