七牛雲視頻上傳

1、七牛雲存儲使用參考文檔

# 七牛雲管理后台地址 https://portal.qiniu.com/kodo/bucket # 七牛雲使用 https://developer.qiniu.com/kodo/manual/1233/console-quickstart # pythonSDK https://developer.qiniu.com/kodo/sdk/1242/python # Node.js SDK V6 https://developer.qiniu.com/kodo/sdk/3828/node-js-v6 # JavaScript SDK歷史文檔1.x https://developer.qiniu.com/kodo/sdk/4244/the-javascript-sdk-historical-documents-1-x

2、七牛雲介紹

　　　　　　1. 以前看見過FastDfs+FFmpeg進行視頻存儲等操作，但是這種方式穩定性會低一些，而且成本也沒有降低。

　　　　　　2. 市面上關於雲存儲的第三方服務比比皆是，最著名的無疑就是七牛雲存儲，本次我們將演示用django+Vue+七牛雲進行視頻存儲與播放。　　　　　　

　　3、七牛雲上傳邏輯

　　　　　　1. 在做七牛雲的文件上傳時，很多人有一個誤區，就是以為是前端先上傳到后台服務器，然后后台服務器再將文件上傳到七牛雲。

　　　　　　2. 這個邏輯本身沒有問題，但是會遇到一個問題，如果文件大會導致上傳很慢

　　　　　　3. 正確邏輯應該是前端直接上傳七牛，而后台只承擔生成token和存儲七牛雲返回的hash的任務。

1.2 django+JavaScript上傳視頻

　　1、參考七牛雲SDK

# pythonSDK
https://developer.qiniu.com/kodo/sdk/1242/python# JavaScript SDK歷史文檔1.x
https://developer.qiniu.com/kodo/sdk/4244/the-javascript-sdk-historical-documents-1-x# JavaScript 官方demohttps://github.com/qiniu/js-sdk/tree/1.x#demo

2、代碼

from django.shortcuts import render,HttpResponse
from django.views import View
import json

'''獲取上傳token'''
class QNYTokenView(View):
    def get(self,request):
        from qiniu import Auth, put_file, etag
        import qiniu.config
        # 需要填寫你的 Access Key 和 Secret Key
        access_key = 's-hjo_Y5PSl***************lNLzTNrCig_0dN'
        secret_key = 'dnMGngbNbFK***************l_XFlo49lc4YyM'
        # 構建鑒權對象
        q = Auth(access_key, secret_key)
        # 要上傳的空間
        bucket_name = '460-chao'
        # 生成上傳 Token，可以指定過期時間等
        token = q.upload_token(bucket_name, expires=3600)
        return HttpResponse(json.dumps({'uptoken': token}, ensure_ascii=False))

1.3 vue+django上傳視頻

　　 *參考代碼：*https://gitee.com/edushiyanlou/QiniuUploader

　　1、前端Vue代碼

vue init webpack qiniuVue              # 初始化一個vue前端項目
npm install --save axios               # 安裝axios
npm install  --save  jquery@1.12.1     # 安裝jquery

django代碼樣式

from django.shortcuts import render,HttpResponse
from django.views import View
import json

'''獲取上傳token'''
class QNYTokenView(View):
    def get(self,request):
        from qiniu import Auth, put_file, etag
        import qiniu.config
        # 需要填寫你的 Access Key 和 Secret Key
       access_key = 's-hjo_Y5PSl***************lNLzTNrCig_0dN'
        secret_key = 'dnMGngbNbFK***************l_XFlo49lc4YyM'
        # 構建鑒權對象
        q = Auth(access_key, secret_key)
        # 要上傳的空間
        bucket_name = '460-chao'
        # 生成上傳 Token，可以指定過期時間等
        token = q.upload_token(bucket_name, expires=3600)
        return HttpResponse(json.dumps({'uptoken': token}, ensure_ascii=False))

vue代碼樣式

<template>
  <div>
      <input type="file" name='upFile' id="upFile" @change='changeFile($event)'>
      <input type="button" name="開始上傳" value="開始上傳" @click='uploadFile()'>
      <img v-if="coverUrl" :src="coverUrl" alt="封面">
      <el-progress :percentage="filePercent"></el-progress>
      {{filePercent}}
  </div>
</template>
<script>
import * as qiniu from "qiniu-js";
 
export default {
  name:'qiniu',
  data() {
    return {
      file:null,
      videoUrl:null,
      coverUrl:null,
      filePercent:0
    };
  },
  methods: {
    changeFile(e){
    //   獲取文件
      this.file = e.target.files[0];
    },
    uploadFile() {
    // 當前VUE中的this 是指向實例，相當於父級，指向指不到子級中。所需需要一個變量 _this 存儲this得指向。
      let _this = this
    // 獲取身份的token
      let token = 's-hjo_Y5PSlHGOaMLn-NfKHmxrlNLzTNrCig_0dN:fXoqUiOuAYEWnsGws3dLmJXnL80=:eyJzY29wZSI6IjQ2MC1jaGFvIiwiZGVhZGxpbmUiOjE2MDQ5MjYyNTB9',
    // 上傳時的配置
      var config = {
        useCdnDomain: true
      };
    //  設置文件的配置
      var putExtra = {
        fname: "",
        params: {},
        mimeType: null
      };

    //   實例化七牛雲的上傳實例
      var observable = qiniu.upload(_this.file, null, token, putExtra, config);
    //   設置實例的監聽對象
      var observer = {
        //   接收上傳進度信息
        next(res) {
            // 上傳進度
            _this.filePercent = parseInt(res.total.percent) 
            if(_this.filePercent==100){
                console.log("success")
            } 
        },
        // 接收上傳錯誤信息
        error(err) {
          console.log(err)
        },

        // 接收上傳完成后的信息
        complete(res) {
             console.log(res.key)
        }
      };
      // 上傳開始
      var subscription = observable.subscribe(observer); 
    }
    
  }
};
</script>