using Qiniu JS SDK to upload Videos in Django

Hujiawei Bujidao


     

using Qiniu JS SDK to upload Videos in Django


使用七牛云存储服务来存储网站(Django开发)中用户上传的视频,特此记录下来,以防以后需要。

PS: 如何想要在SAE上使用Qiniu的话就需要将Qiniu Python SDK相关的源文件都拷贝到Django项目中,否则SAE会报找不到qiniu这个模块,因为SAE内置的预定义的模块列表中没有qiniu

我想要的目标是可以上传视频,最好还能显示上传的进度

七牛提供了一个演示通过文件上传的网站:http://jssdk.demo.qiniu.io

image

该SDK是七牛提供的Javascript SDK,传送门: 七牛的Javascript SDK on Github

这个演示网站做得非常不错,演示了文件上传并显示了上传的进度,正是我想要的效果,所以我后面把这个JS SDK嵌入到Django项目中,测试其功能

下面这段代码演示的是在纯Python项目中如何将文件上传到七牛服务器,若还没有安装七牛的话请先运行 pip install qiniu [注意,我的版本是6.1.8,最近七牛的SDK发生了大变化,所以如果想要和我得到一样的效果请安装6.1.8版本,我的好友已经测试过其他的更新的版本都不行]

# coding=utf-8
import os

__author__ = 'hujiawei'
__doc__ = 'qiniu sdk video demo'

import StringIO
import sys
import qiniu.conf
import qiniu.rs
import qiniu.io

BUCKET_NAME = "YOUR_BUCKET_NAME"
qiniu.conf.ACCESS_KEY = "YOUR_ACCESS_KEY"
qiniu.conf.SECRET_KEY = "YOUR_SECRET_KEY"

policy = qiniu.rs.PutPolicy(BUCKET_NAME)
uptoken = policy.token()
print(uptoken)

# ############ 示例:上传视频 ###############
# extra = qiniu.io.PutExtra()
# item = os.path.join(os.getcwd(), 'hellokitty.m4v')
# ret, err = qiniu.io.put_file(uptoken, None, item, extra)
# if err is not None:
#     sys.stderr.write('error: %s ' % err)

#ok: hamster.swf


# ############ 示例:上传图片 ###############
extra = qiniu.io.PutExtra()
extra.mime_type = "image/jpeg"
# print os.getcwd() #/Users/hujiawei/PycharmProjects/qiniusimple
item = os.path.join(os.getcwd(), 'coder.jpg')
ret, err = qiniu.io.put_file(uptoken, None, item, extra)
if err is not None:
    sys.stderr.write('error: %s ' % err)

# extra = qiniu.io.PutExtra()
# # extra.mime_type = "image/jpeg" #image/png 七牛能够自动识别mime-type
# # print os.getcwd() #/Users/hujiawei/PycharmProjects/qiniusimple
# item = os.path.join(os.getcwd(), 'apple.png')
# ret, err = qiniu.io.put_file(uptoken, None, item, extra)

############# 示例:上传字符串内容 ###############
# extra = qiniu.io.PutExtra()
# extra.mime_type = "text/plain"
# key = "hellotxt"
# data = StringIO.StringIO("hello!") # data 可以是str或readable对象
# ret, err = qiniu.io.put(uptoken, key, data, extra)
# if err is not None:
#     sys.stderr.write('error: %s ' % err)

本来我以为要在Django中使用这个SDK会很难,因为看到该项目的Github介绍还要安装Node.js等工具,可是实践了发现其实不难,如果只是想简单地使用它那么可以就把它们当做一个js库就行了,但是因为qiniu js sdk源码中的重要文件里面使用了不少相对路径,所以建议还是将sdk中的所有内容一起拷贝到Django项目中,保持其原有的相对位置。

需要的可以下载我制作的可运行的Django项目 A Django site using Qiniu JS SDK

如果要正常运行,请先仔细阅读下面的内容:

1.修改video/views.py中的如下内容,具体填什么你懂得

BUCKET_NAME = "YOUR_BUCKET_NAME"
qiniu.conf.ACCESS_KEY = "YOUR_ACCESS_KEY"
qiniu.conf.SECRET_KEY = "YOUR_SECRET_KEY"

2.修改static/js/main.js中的内容,我设置了获取uptoken的请求URL为/video/uptoken,这样每次要上传一个文件的时候,这个URL就会被调用,它会返回一个JSON字符串,包含了uptoken的值,具体可见video/views.py中的uptoken方法;其次还设置了域名,你需要将它设置为你的七牛域名,例如http://whyeduvideo.qiniudn.com/

uptoken_url: '/video/uptoken',
domain: 'YOUR_DOMAIN_NAME',

其他的内容就不用修改了,直接运行项目,进入到http://127.0.0.1:8000/video/下就能看到

image

如果你想要得到上传之后的文件在七牛服务器上的链接地址的话,请看下面的内容

在SDK的js/ui.js文件的189行的函数中,其中的变量url就是我们需要的,我们只需要通过js将这个变量赋值给界面中的其他元素中就行了,可以直接在下面的函数中进行赋值,也可以在js/main.js文件的FileUploaded函数中进行赋值,推荐后面一种方式。

下面代码中的id='videourl'是我自己添加的,用于后面的赋值操作

FileProgress.prototype.setComplete = function(up, info) {
    var td = this.fileProgressWrapper.find('td:eq(2) .progress');
    var res = $.parseJSON(info);
    var url;
    if (res.url) {
        url = res.url;
        str = "<div><strong>Link:</strong><a href=" + res.url + " target='_blank' id='videourl' > " + res.url + "</a></div>" +
            "<div class=hash><strong>Hash:</strong>" + res.hash + "</div>";
    } else {
        var domain = up.getOption('domain');
        url = domain + encodeURI(res.key);
        var link = domain + res.key;
        str = "<div><strong>Link:</strong><a href=" + url + " target='_blank'  id='videourl' > " + link + "</a></div>" +
            "<div class=hash><strong>Hash:</strong>" + res.hash + "</div>";
    }

js/main.js文件的FileUploaded函数中进行赋值,下面的例子是将url赋值给表单中的一个隐藏的input组件。

 'FileUploaded': function(up, file, info) {
                var progress = new FileProgress(file, 'fsUploadProgress');
                progress.setComplete(up, info);

                $('#inputurl').val($('#videourl').attr("href"));//url

            },
Hujiawei is a mobile developer Guangdong, China http://javayhu.me/ 本博客所有文章均为原创,请勿随意转载,如需转载请联系我 (hujiawei090807 AT gmail.com) 我在小专栏有个移动开发技术专栏,不定期分享移动开发的核心技术,总结移动开发的实战经验
所有文章皆为原创,内容制作精良,保证干货满满,欢迎订阅 (https://xiaozhuanlan.com/u/javayhu)
>>> 我最近在Android面试指南小专栏里面写了一篇稿子 [Android面试——算法面试心得] ,欢迎阅读!<<<
下面的二维码是我个人维护的微信公众号“潇涧技术专栏”,会不定期分享移动开发的核心技术,欢迎关注!