七牛云视频上传

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>

View Code

七牛云视频上传

1.2 django+JavaScript上传视频

1.3 vue+django上传视频

推荐阅读