注册七牛云、上传文件到七牛云

最新推荐文章于 2024-08-13 17:03:31 发布

G九八

最新推荐文章于 2024-08-13 17:03:31 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/weixin_46690856/article/details/109586752

版权

文章目录

1、注册七牛云

1.1 注册七牛云
```
https://sso.qiniu.com/
```

在这里插入图片描述
1.2注册完成登录即可跳转到七⽜云管理界⾯

2、七牛云快速入门

参考官⽅地址：https://developer.qiniu.com/kodo/manual/1233/console-quickstart

2.1创建空间

1、登录 七牛开发者平台
2、存储空间 管理界面

在这里插入图片描述

3、新建存储空间
4、创建成功后页面

2.2上传文件

1、空间管理-------文件
2、上传文件
3、上传后就可以看到这个⽂件，复制外链即可在浏览器中打开

http://qi11dgv17.hn-bkt.clouddn.com/07.检查⽤户名是否使⽤接⼝.mp4

在这里插入图片描述

viwes.py

class QiniuV(APIView):
    def get(self,request):
        from qiniu import Auth

        #需要填写你的Access Key  和    Secret Key
        access_key='YHZ2MWp4NwB11GtuQhF3tY0SWjtbW7ACVDYL6XPO'
        secret_key='80twwmv6rSgbAtqCGZ7Ld7hKGoTMyTnMEiqnd7z4'

        #构建鉴权对象
        q=Auth(access_key,secret_key)
        #要上传的空间
        bucket_name='sylll'
        #上传后保存的文件名
        key=None
        #3600 为token过期时间  秒为单位  3600等于1小时
        token=q.upload_token(bucket_name,key,expires=3600)
        return Response({'uptoken':token})

路由

from django.urls import path
from oauth.views import *

urlpatterns =[
  
    path('qntoken/', QiniuV.as_view()),
]

send_video.vue

<template>
  <div>
    <h1>七牛上传页面</h1>
    <input type="file" @change="get_file($event)" />
    <input type="button" value="上传" @click="post_video()" />
<!--     <el-progress :percentage="filePercent"></el-progress> -->
    {{ filePercent }}
  </div>
</template>

<script>
import * as qiniu from "qiniu-js";

export default {
  data() {
    return {
      file: "",
      filePercent: 0,
    };
  },
  methods: {
    get_file(e) {
      this.file = e.target.files[0];
    },
    generate_uuid: function () {
      var d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
        d += performance.now();
      }
      var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
        }
      );
    },
    post_video() {
      let _this = this;
      const file_data = _this.file;
      let key = _this.generate_uuid();
      let token =
        "YHZ2MWp4NwB11GtuQhF3tY0SWjtbW7ACVDYL6XPO:QTqazytJKWV-9EBha7iL186g2i4=:eyJzY29wZSI6InN5bGxsIiwiZGVhZGxpbmUiOjE2MDQ5MTE1MTd9"
      let putExtra = {
        fname: "",
        mimeType: "",
        customVars: {},
        metadata: {},
      };
      const config = {
        useCdnDomain: true,
        region: null,
      };
      const observable = qiniu.upload(file_data, key, token, putExtra, config);
      const observer = {
        next(res) {
          console.log(res.total.percent);
          _this.filePercent = res.total.percent;
        },
        error(err) {
          console.log(err);
        },
        complete(res) {
          console.log(res);
        },
      };
      const subscription = observable.subscribe(observer); // 上传开始
    },
  },
};
</script>

<style>
</style>