七牛云上传文件----前端vue实现

官方接口文档：
python SDK：https://developer.qiniu.com/kodo/sdk/1242/python
JavaScript SDK： https://developer.qiniu.com/kodo/sdk/1239/java

1、安装

pip install qiniu

npm install qiniu-js

2、准备工作

申请空间及获取密钥准备

3、后端获取七牛云token

#######################utils/MyBaseView.py#######################################
from syl_pro.settings import QINIU_ID, QINIU_SECRET
from qiniu import Auth

def qiniu_token():
    # 需要填写你的 Access Key 和 Secret Key
    access_key = QINIU_ID
    secret_key = QINIU_SECRET
    # 构建鉴权对象
    q = Auth(access_key, secret_key)
    # 要上传的空间
    bucket_name = 'syl-feifei'
    # 生成上传 Token，可以指定过期时间等
    token = q.upload_token(bucket_name, expires=3600)
    return token

################################ oauthapp/views.py  #############################
from rest_framework.views import APIView
from rest_framework.response import Response
from utils.MyBaseView import qiniu_token

class QiNiuToken(APIView):

    # permission_classes = [IsAuthenticated]

    def get(self, request):
        token = qiniu_token()
        print(token)
        res_data = {
            "code": 200,
            "msg": "获取token成功",
            "data": {
                "uptoken": token
            }
        }
        return Response(res_data)
#########################  oauthapp/urls.py #########################
from django.urls import path, include
from oauthapp import views

router = DefaultRouter()

urlpatterns = [
    path('qntoken/', views.QiNiuToken.as_view()), # 获取七牛云token
]

4、前端vue调用接口获取 七牛云token，进行文件上传

<template>

   <div>
    <h1>xxx课程</h1>
    <div style="margin: 20px;">
      <label>节标题：</label>
      <input type="text" name=""   v-model="title">
    </div>
    <div style="margin: 20px;" >
      <label>节序号：</label>
      <input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')" v-model="serial_num">
    </div>
    <div style="margin: 20px;">
      <label>课程时长：</label>
      <input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')" v-model="time" >
    </div>
    <div style="margin: 20px;">
      <label>序号：</label>
      <input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')" v-model="seq">
    </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>
      <div>{{filePercent}}</div>
      <button @click="add_section()">提交添加信息</button>
      <video
      :src="pay_video"
      width="640"
      height="480"
      controls="controls"
    ></video>
   

  </div>
</template>
<script>
import * as qiniu from "qiniu-js";
import {qn_token_get,section_add} from './axios_api/api'
export default {
  name:'qiniu',
  data() {
    return {
      pay_video:'',
      file:null,
      videoUrl:"",
      coverUrl:null,
      filePercent:0,
      token:'',
      title:'',
      seq:'',
      time:'',
      serial_num:'',
      baseurl:'http://qkqud1kd2.hb-bkt.clouddn.com/'
    };
  },
  methods: {
    changeFile(e){
    //   获取文件
      this.file = e.target.files[0];
    },
    gettoken(){
        qn_token_get().then(res=>{
          
          return this.token = res.data.uptoken
          console.log(this.token)
        })
    },

    uploadFile() {
    // 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。
      let _this = this       
    // 获取身份的token
      let token = _this.token
      
    // 上传时的配置
      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){
                alert("上传成功")
            } 
        },
        // 接收上传错误信息
        error(err) {
          console.log(err)
        },

        // 接收上传完成后的信息
        complete(res) {
             // 拼接路径字符串
             _this.videoUrl = _this.baseurl+res.key
             console.log(_this.videoUrl)
             
        }
      };
      // 上传开始
      var subscription = observable.subscribe(observer); 
    },
    // 添加课程 节信息
    add_section(){
      let chapter_id = this.$route.query.id
      console.log(chapter_id)
      let data={
          "title":this.title,
          "learn_time":this.time,
          "video":this.videoUrl,
          "seq_num":this.seq,
          "chapter":chapter_id,
          "serial_num":this.serial_num
      }
      section_add(data).then(res=>{
        // console.log(res)
        // alert("添加成功")
        // window.location = "http://"+res.video
        this.pay_video = res.video
        
      })
    },
    
    
  },

  mounted(){
    this.gettoken()
  }
    
  
};
</script>



<style>
  #container{
    width:200px;
    height:200px;
    border:1px solid #9d9d9d;
    border-radius: 6px;
    margin:50px auto;
    position: relative;
    overflow: hidden;
  }
  .upload-progress{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    background: rgba(0,0,0,0.5);
    z-index: 5;
    color:#fff;
    line-height: 200px;
    text-align: center;
    display: none;
  }
  #uploadImage{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 2;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
  }
  #container img{
    width:100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
  }
</style>