七牛云上传html,前端 | 使用 webuploader 上传到七牛云存储简单例子

背景

在做应用时，考虑到应用的会产生很多图片，为了省劲，就选择了七牛云存储，使用云存储的好处大家都是有感的，但还是有一点点担心，如果使用的第三方云存储挂掉了，(=@__@=)，这是后话

前台使用的上传组件选择了webuploader，我设计的业务流程如下

前端图片上传到七牛，七牛返回图片的名称，然后前端把返回的数据填充到指定的表单中，然后再次提交到后台，保存到数据库中，路子大致是这样的

后台选择了 django-1.6.7, 至于为什么不用更高级的版本，或许是 south 用的太久了，太爽了，所以七牛的 SDK，选用了 python 版本的 SDK

环境版本依赖

python: 2.7.6

django: 1.6.7

qiniu SDK： 7.0.4

webuploader: 0.1.6

Token 生成

下面这段偷懒 粘贴过来的

在七牛云存储中，整个上传流程大体分为这样几步：

业务服务器颁发上传凭证给客户端(终端用户)

客户端凭借 上传凭证 上传文件到七牛

在七牛获得完整数据后，发起一个 HTTP 请求回调到业务服务器

业务服务器保存相关信息，并返回一些信息给七牛

七牛原封不动地将这些信息转发给客户端(终端用户)

这里的上传凭证即为 Token, 在我的这个例子中，直接省去了第三步和第四步，如果需要走第三步和第四步，可以查看相应的文档

Token 生成业务代码

from qiniu import Auth

class AddView(TemplateView):

template_name = 'xx.html'

def get_context_data(self, **kwargs):

q = Auth(access_key, secret_key)

token = q.upload_token('xxx')

context = super(AddView, self).get_context_data(**kwargs)

context['token'] = token

return context

这样就把 Token 传入到视图中，如果想图省事，可以把这段生成业务封装成一个中间件

webuploader 声明

WebUploader.create({

swf: 'xxxx/libs/webuploader/Uploader.swf',

server: 'http://up.qiniu.com/',

pick: '#xxxxx',

resize: false,

fileNumLimit: xxx,

auto: true,

formData: {

token: {token 传入后台生成的Token}

}

});

上传成功之后，七牛返回

Object {

hash: "FtsE1LaEX5dqGOoY2l1sqGX62WMV",

key: "FtsE1LaEX5dqGOoY2l1sqGX62WMV",

_raw: '{

"hash":"FtsE1LaEX5dqGOoY2l1sqGX62WMV",

"key":"FtsE1LaEX5dqGOoY2l1sqGX62WMV"

}

}

如此

你在七牛建立的指定空间的默认地址 + 返回的 hash 值，即为你上传到七牛的路径

举例：

最后

这只是一个最简单的例子，里面有很多的玩法，前端和后端都是，看你怎么玩了