七牛云上传+图片静态资源

 

首先下载七牛云的JavaScript-SDK

npm install qiniu-js

下载完成JavaScript-SDK以后就可以上传图片信息了

 

 后端配置

def qiniu_token():
    # 需要填写你的 Access Key 和 Secret Key
    access_key = '72MxywMMmUts4DnK_0xjc1RklS-dv1rykh1wrLiS'
    secret_key = 'XI-usqs2Ce94er7i03vX8mvKQPUN9vIRrNEzoaAv'

    # 构建鉴权对象
    q = Auth(access_key, secret_key)

    # 要上传的空间
    bucket_name = 'wangxiaochen'
    # 生成上传 Token，可以指定过期时间等
    token = q.upload_token(bucket_name,expires=3600)
    return token

# views页面
class QiNiuToken(APIView):
    permission_classes = [IsAuthenticated]
    def get(self,request):
        token = qiniu_token()
        print(token)
        res_data = {
            'code':200,
            'msg':'获取token成功',
            'data':{
                'uptoken':token
            }
        }
        return Response(res_data)

 

前端配置

<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];
    },
    uploadFile() {
    // 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。
      let _this = this
    // 获取身份的token
      let token = '6iHLwjADA4xPDG9Wl5FdJFkdU_mcaE5YrgDyoFHa:xT_22Uqm24-ZLGRFvk74Z7F-Xrw=:eyJzY29wZSI6ImppeXVuZWR1IiwiZGVhZGxpbmUiOjE2MDMzNTI0OTh9'
    // 上传时的配置
      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); 
    }
    
  }
};
</script>

 

 

图片配置

settings 配置

MEDIA_URL='/media/'

MEDIA_ROOT=os.path.join(BASE_DIR,'media')

主路由配置

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)