前端 | 运用 webuploader 上传到七牛云存储简朴例子

2024年1月10日 326次阅读 来源: kycool

背景

在做运用时，考虑到运用的会发生许多图片，为了省劲，就挑选了七牛云存储，运用云存储的优点人人都是有感的，但照样有一点点忧郁，假如运用的第三方云存储挂掉了，(=@__@=)，这是后话

前台运用的上传组件挑选了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 天生

下面这段偷懒 粘贴过来的

在七牛云存储中，全部上传流程大致分为如许几步：

  1. 营业服务器颁布上传凭据给客户端（终端用户）
  2. 客户端依附 上传凭据 上传文件到七牛
  3. 在七牛取得完全数据后，提议一个 HTTP 要求回调到营业服务器
  4. 营业服务器保留相干信息，并返回一些信息给七牛
  5. 七牛一成不变地将这些信息转发给客户端（终端用户）

这里的上传凭据即为 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 值，即为你上传到七牛的途径

举例：

末了

这只是一个最简朴的例子，内里有许多的弄法，前端和后端都是，看你怎样玩了

    原文作者：kycool
    原文地址: https://segmentfault.com/a/1190000002781331
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞