Element avatar upload practice

pip install qiniu

# Qiniu Cloud from qiniu import Auth

# You need to fill in your Access Key and Secret Key
access_key = 'Access Key '
secret_key = 'Secret Key'

def qn_token():
    #Build authentication object q = Auth(access_key, secret_key)
    # The name of the space to be uploaded bucket_name = 'name'
    # Generate upload token
    token = q.upload_token(bucket_name)
    return token

# Import the packaged token
from utils.comm import qn_token

#Qiniu Cloud gets the token interface class GetQnToken(APIView):
    def get(self, request):
        token = qn_token()
        return Response({'code':200,'token':token})

from django.urls import path
from . import views 


urlpatterns = [
    path('gettoken/', views.GetQnToken.as_view())
]

<template>
    <div>
        <!-- action is a required parameter, the upload address is Qiniu Cloud: http://up-z1.qiniu.com/-->
        <!-- Additional parameters included when uploading data-->
        <!-- on-success Hook when the file is uploaded successfully-->
        <!-- before-upload is the hook before uploading files. The parameter is the uploaded file. If false is returned or Promise is returned and rejected, the upload is stopped. -->
        <el-upload
            class="avatar-uploader"
            action="http://up-z1.qiniu.com/"  
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :data='postData'>
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            imageUrl: '',
            postData:{
                // When uploading, you need to bring the attached token
                token:''
            }
        }
    },
    methods: {
        // Get Qiniu Cloud token
        getToken(){
            this.axios.get('sadmin/gettoken/').then(res=>{
                console.log(res.data)
                this.postData.token = res.data.token
            })
        },
        //Hook for successful file upload handleAvatarSuccess(res, file) {
            this.imageUrl = 'cdn test domain name' + res.key;
            console.log(this.imageUrl)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('Uploaded avatar images can only be in JPG format!');
            }
            if (!isLt2M) {
            this.$message.error('The uploaded avatar image size cannot exceed 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    created() {
        this.getToken()
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

**Regional correspondence table of Qiniu Cloud storage objects**
**A storage area table of Qiniu**

| **Storage area** | **Region code** | Client upload address| **Server upload address** |
| ------------ | ------------ | --------------------------------- | ----------------------------- |
| East China | ECN | `http(s)://upload.qiniup.com` | `http(s)://up.qiniup.com` |
| North China | NCN | `http(s)://upload-z1.qiniup.com` | `http(s)://up-z1.qiniup.com` |
| South China | SCN | `http(s)://upload-z2.qiniup.com` | `http(s)://up-z2.qiniup.com` |
| North America | NA | `http(s)://upload-na0.qiniup.com` | `http(s)://up-na0.qiniup.com` |