Python + Vue + 七牛云上传图片

Python + Vue + 七牛云上传图片

申请七牛云账号、创建七牛云空间这是省略

1、使用python获取上传使用的token值

• 安装七牛云

  pip install qiniu==7.2.6

• 获取token,这里是使用的工用方法，在myutils下创建qiniu_api.py文件

  from qiniu import Auth
  ​
  ​
  def qiniu_token():
      # 定义密钥
      qn = Auth('bm-V0IyKPuFLRWJengvWtXvDC8Gx5BQhCN0kIBrE', 'FYaPq_T81VDCK4-c5Ad-hRf6myQ_zuq1cywD2D4P')
      # 指定上传空间, 返回token值
      token = qn.upload_token('bucket0325')
      return token

   

• 在views.py里使用qiniu_token

  from django.views import View
  from django.http import JsonResponse
  from myutils.qiniu_api import qiniu_token
  ​
  ​
  class UpTokenView(View):
  ​
      def get(self, request):
          """
          七牛云token接口
          """
          return JsonResponse({'token': qiniu_token()})

   

• 定义url

  from django.urls import path
  from . import views
  ​
  urlpatterns = [
      path('uptoken/', views.UpTokenView.as_view()),  # 获取七牛云上传凭证
  ]

   

2、在vue里面写入的内容

<template>
  <div>
      <input type="file" name='upFile' id="upFile" @change='changeFile($event)'>
      <input type="button" name="开始上传" value="开始上传" @click='uploadFile()'>
      <img v-if="coverUrl" :src="coverUrl" alt="封面">
      <el-progress :percentage="filePercent"></el-progress>
      {{filePercent}}
  </div>
</template>
<script>
import * as qiniu from "qiniu-js";
 
export default {
  name:'qiniu',
  data() {
    return {
      file:null,
      videoUrl:null,
      coverUrl:null,
      filePercent:0
    };
  },
  methods: {
    changeFile(e){
    //   获取文件
      this.file = e.target.files[0];
    },
      // 获取uptoken
    get_uptoken() {
          axios({
              url: 'http://127.0.0.1:8000/day01/uptoken/',
              method: 'get'
          }).then(res=>{
              this.uptoken = res.data.token
          })
      },
    uploadFile() {
    // 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。
      let _this = this
    // 获取身份的token
      let token = _this.uptoken
    // 上传时的配置
      var config = {
        useCdnDomain: true
      };
    //  设置文件的配置
      var putExtra = {
        fname: "",
        params: {},
        mimeType: null
      };
​
    //   实例化七牛云的上传实例
      var observable = qiniu.upload(_this.file, null, token, putExtra, config);
    //   设置实例的监听对象
      var observer = {
        //   接收上传进度信息
        next(res) {
            // 上传进度
            _this.filePercent = parseInt(res.total.percent) 
            if(_this.filePercent==100){
                console.log("success")
            } 
        },
        // 接收上传错误信息
        error(err) {
          console.log(err)
        },
​
        // 接收上传完成后的信息
        complete(res) {
             console.log(res.key)
        }
      };
      // 上传开始
      var subscription = observable.subscribe(observer); 
    }
    
  },
    mounted() {
    this.get_uptoken()
   }
}
</script>