七牛雲上傳視訊
阿新 • • 發佈：2020-10-14
目錄
使用七牛雲上傳視訊
方便筆記只寫了上傳視訊要使用到的程式碼
在django端獲取七牛雲的token
# models.py中定義課程節表 class Sections(Base): title = models.CharField("節標題", max_length=24) seriasl_num = models.IntegerField("節序號") chapters = models.ForeignKey(Chapters, related_name="sections", on_delete=models.SET_NULL, null=True) learn_time = models.IntegerField("學習小時", default=1) video = models.FileField("上傳視訊", upload_to='videos/%Y%m%d/',blank=True, max_length=1024) seq_num = models.IntegerField("序號", default=1) class Meta: db_table = "tb_sections" def __str__(self): return self.title
# 在views.py中獲取七牛雲token（檢視官方文件https://developer.qiniu.com/kodo/sdk/1242/python） # 獲取七牛雲的token class QuToken(APIView): def get(self, request): # 需要填寫你的 Access Key 和 Secret Key access_key = 'kZNzrg7Mzq458AurbinXPwsxiBZwb2cowx660A5E' secret_key = 'QMthpVgv6rlLcmJoZ0VYQlF3qEsHhrk35_B19B6B' # 構建鑑權物件 q = Auth(access_key, secret_key) # 上傳後儲存的檔名 # key = '' # 生成上傳 Token，可以指定過期時間等 # 上傳策略示例 # https://developer.qiniu.com/kodo/manual/1206/put-policy policy = { # 'callbackUrl':'https://requestb.in/1c7q2d31', # 'callbackBody':'filename=$(fname)&filesize=$(fsize)' # 'persistentOps':'imageView2/1/w/200/h/200' } # 要上傳的空間 bucket_name = 'sylimages' # 生成上傳 Token，可以指定過期時間等 token = q.upload_token(bucket_name, expires=3600) return Response({'uptoken': token})
vue端程式碼
<template> <div> <p>節標題： <input type="text" v-model="from_data.title"></p> <p>節序號： <input type="number" v-model="from_data.seriasl_num"></p> <p>學習小時： <input type="text" v-model="from_data.learn_time"></p> <p>所屬章節： <select v-model="from_data.chapters"> <option :value="i.id" v-for="i in course_data.chapters" :key="i.id">{{i.title}}</option> </select> </p> <p>序列： <input type="text" v-model="from_data.seq_num"></p> <!-- 1.上傳時的點選框 --> <div id="container"> <div> <div id="uploadImage">選擇檔案{{uptoken}}</div> <div class="upload-progress"></div> </div> </div> </div> </template> <script> import $ from 'jquery' // 使用已經封裝好的請求 import { qn_token_get,course_get,insert_video } from './axios_api/api' export default { data() { return { uptoken: '', qn_url: 'http://qi67pmgey.hn-bkt.clouddn.com/', cid: this.$route.query.cid, // 章id,前一個頁面跳轉來時攜帶的id course_data: {}, from_data: { "title": "", "seriasl_num": "", "learn_time": "", "chapters": 1, "video": "", "seq_num": "" // 準備要傳送到後端的資料 } }; }, methods: { add_sql(){ console.log(this.from_data) insert_video(this.from_data).then((resp) => { console.log(resp) }) }, get_course(){ course_get({'id': this.cid}).then((resp) => { this.course_data = resp }) }, // 請求後臺獲取七牛雲token getQiniuToken: function (callback){ qn_token_get({ }).then(resp => { // debugger this.uptoken = resp.uptoken; console.log(this.uptoken) callback() // callback 出入的是回撥函式 initQiniu() 用來初始化Qiniu.uploader() }).catch( err=>{ console.log(err,'err') }) }, initQiniu: function () { var ths = this var uploader = Qiniu.uploader({ disable_statistics_report: false, // 禁止自動傳送上傳統計資訊到七牛，預設允許傳送 runtimes: 'html5,flash,html4', // 上傳模式，依次退化 browse_button: 'uploadImage', // 上傳選擇的點選按鈕，必需 container: 'container', // 上傳區域DOM ID，預設是browser_button的父元素 max_file_size: '500mb', // 最大檔案體積限制 flash_swf_url: 'Moxie.swf', // 引入flash，相對路徑 dragdrop: false, // 關閉可拖曳上傳 chunk_size: '4mb', // 分塊上傳時，每塊的體積 multi_selection: !(moxie.core.utils.Env.OS.toLowerCase() === "ios"), uptoken: this.uptoken, // 在初始化時，uptoken，uptoken_url，uptoken_func三個引數中必須有一個被設定,uptoken是上傳憑證，由其他程式生成;uptoken_url是提供了獲取上傳憑證的地址，如果需要定製獲取uptoken的過程則可以設定uptoken_func;其優先順序為uptoken > uptoken_url > uptoken_func // uptoken_url: 'http://127.0.0.1:8000/uptoken', // 在初始化時，uptoken，uptoken_url，uptoken_func三個引數中必須有一個被設定,uptoken是上傳憑證，由其他程式生成;uptoken_url是提供了獲取上傳憑證的地址，如果需要定製獲取uptoken的過程則可以設定uptoken_func;其優先順序為uptoken > uptoken_url > uptoken_func // uptoken:'q06bq54Ps5JLfZyP8Ax-qvByMBdu8AoIVJpMco2m:kyTiuN6GBUpfNt1nJIA7C8CCStY=:eyJzY29wZSI6IjEzMTIzMTIzMTIzIiwiZGVhZGxpbmUiOjE1NzY0MTM3MTB9', domain: 'redinnovation.s3-cn-north-1.qiniucs.com', // bucket域名，下載資源時用到，必需 get_new_uptoken: false, // 設定上傳檔案的時候是否每次都重新獲取新的uptoken auto_start: true, // 選擇檔案後自動上傳，若關閉需要自己繫結事件觸發上傳 max_retries: 3, // 上傳失敗最大重試次數 save_key: true, resize: { // 想限制上傳圖片尺寸，直接用resize這個屬性 width: 300, height: 300 }, init: { 'FilesAdded': function(up, files) { // 檔案新增進佇列後，處理相關的事情 plupload.each(files, function(file) { console.log(file) }); }, 'BeforeUpload': function(up, file) { // 每個檔案上傳前，處理相關的事情 console.log("開始上傳之前"); $(".upload-progress").show(); }, 'UploadProgress': function(up, file) { // 每個檔案上傳時，處理相關的事情 console.log("上傳中"); $(".upload-progress").html("上傳進度:"+file.percent + "%"); }, 'FileUploaded': function(up, file, info) { // 每個檔案上傳成功後，處理相關的事情 console.log("上傳成功"); console.log(info,4567890); $(".upload-progress").hide(); var img = new Image(); //建立一個Image物件，實現圖片的預下載 var res = JSON.parse( info.response ) // debugger console.log("url>>>>>>",ths.qn_url) ths.qn_url = ths.qn_url + res.key; // 將路由拼接成視訊的路由 ths.from_data.video = ths.qn_url // 將拼接好的視訊路由存入from_data中準備傳送到後端存入資料庫 }, 'Error': function(up, err, errTip) { console.log("上傳出錯") }, 'UploadComplete': function() { //佇列檔案處理完畢後，處理相關的事情 } } }); } }, mounted(){ this.get_course() this.getQiniuToken(() => { this.initQiniu() // 將initQiniu()當做callback回撥函式傳入給getQiniuToken函式 }) } } </script>
在後端把vue中的傳來的資料進行儲存
# video直接儲存視訊的路由
# 將存在七牛雲的視訊地址存在資料庫
class Insert_video(APIView):
def post(self, request):
data = request.data
print(data)
section_obj = Sections(title=data.get("title"),
seriasl_num=data.get("seriasl_num"),
learn_time=data.get("learn_time"),
chapters=Chapters.objects.get(pk=data.get("chapters")),
video=data.get("video"),
seq_num=data.get("seq_num"))
section_obj.save()
return Response({"code":200, "msg": "成功"})