序幕

云存储的使用范围当下是非常的广泛了。如：某宝，某东这些大型的网上购物平台，许多的商品图片以及视频都开始了云存储。

那什么是云存储呢

云存储是一种网上在线存储（英语：Cloud storage）的模式，即把数据存放在通常由第三方托管的多台虚拟服务器，而非专属的服务器上。

云存储是在云计算(cloud computing)概念上延伸和衍生发展出来的一个新的概念。

比如：七牛云，又拍云….这些云存储服务器

接下来我们来实现七牛云云存储

七牛云

配置服务器

  1. 首先进入七牛云官网：https://www.qiniu.com/，进行注册登陆

    qiniu

  2. 登陆成功后，进入管理控制台，找到对象存储，并进入

    qiniu

  3. 进入之后创建一个空间

    qiniu

    注：这里值得说一下的是这个区域存储，分为5大区域，选择也是根据自己所在的地区选择。下图是不同区域的上传域名

    qiniu

  4. 创建成功之后在个人头像处找到密钥管理，这里的AK,SK需保存

    qiniu

    qiniu

安装库

使用七牛云还需要安装一个库

1
pip install qiniu

qiniu

Django(调用接口获取七牛云token)

1
2
3
4
5
6
7
8
9
10
11
# 定义七牛云存储接口
from qiniu import Auth
class QiNiu(APIView):
    def get(self,request):
        # 定义密钥
        q = Auth('AK','SK')
        # 指定上传空间
        token = q.upload_token('创建空间的名称')
        return Response({
            'token': token
        })

接口调用返回结果

qiniu

Vue(获取到token，进行上传文件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<template>
  <div>
    <input @change="upload_qiniu" type="file" >
        上传进度：{{fileload}}
  </div>
</template>
<script>

export default {
  data () {
    return {
      // 七牛云token
      uptoken:'',
      // 进度条图片
      fileload:'',
    }
  },
  //注册组件标签
  components:{

  },
  mounted:function(){
    this.get_uptoken()
},
  methods:{
    // 获取七牛云凭证
    get_uptoken(){
      getqiniu_get().then(res=>{
        this.uptoken = res.token
      })
    },
    // 上传七牛(图片)
    upload_qiniu(e){
      // 获取文件对象
      let file = e.target.files[0];
      // 声明变量
      let param = new FormData();
      // 将上传凭证添加参数
      param.append('token',this.uptoken);
      // 添加文件
      param.append('file',file);
      // 定制化axios
      const axios_qiniu = this.axios.create({withCredentials:false});
      // 发送请求
      axios_qiniu({
        method:'POST',
        url:'http://up-z1.qiniu.com',
        data:param,
        timeout:30000,
        // 上传进度
        onUploadProgress:(e)=>{
          // 计算
          var com = (e.loaded / e.total);
          // 判断
          if(com < 1){
            this.fileload = (com * 100).toFixed(2) + '%'
          }
        },
      }).then(res=>{
        console.log(res)
        // 请求结束
        this.fileload = '100%'
        // this.upload_video()
      })
    },
  }
}
</script>
<style scoped>

</style>

页面效果

qiniu

上传成功，返回值

qiniu

注：此处的key与hash是可以与你七牛云的测试域名拼接访问更上传的文件的

qiniu

总结

其实七牛云云存储实现起来并不难，主要是通过AK,SK获取上传的token