Element 头像上传的实战

pip install qiniu

# 七牛云from qiniu import Auth# 需要填写你的 Access Key 和 Secret Keyaccess_key = 'Access Key 'secret_key = 'Secret Key'def qn_token():    #构建鉴权对象    q = Auth(access_key, secret_key)    # 要上传的空间名字    bucket_name = 'name'    # 生成上传 Token    token = q.upload_token(bucket_name)    return token

# 导入封装好的tokenfrom utils.comm import qn_token#七牛云获取token接口class GetQnToken(APIView):    def get(self,request):        token = qn_token()        return Response({'code':200,'token':token})

from django.urls import pathfrom . import views urlpatterns = [    path('gettoken/',views.GetQnToken.as_view())]

<template>    <div>        <!-- action	必选参数，上传的地址  七牛云：http://up-z1.qiniu.com/-->        <!-- data	上传时附带的额外参数 -->        <!-- on-success	文件上传成功时的钩子 -->        <!-- before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->        <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:{                // 上传时要带上附带的token                token:''            }        }    },    methods: {        // 获取七牛云token        getToken(){            this.axios.get('sadmin/gettoken/').then(res=>{                console.log(res.data)                this.postData.token = res.data.token            })        },        // 文件上传成功的钩子        handleAvatarSuccess(res, file) {            this.imageUrl = 'cdn测试域名'+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('上传头像图片只能是 JPG 格式!');            }            if (!isLt2M) {            this.$message.error('上传头像图片大小不能超过 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>**七牛云的存储对象的地区对应表****七牛的一张存储区域表**| **存储区域** | **区域代码** | 客户端上传地址                    | **服务端上传地址**            || ------------ | ------------ | --------------------------------- | ----------------------------- || 华东         | ECN          | `http(s)://upload.qiniup.com`     | `http(s)://up.qiniup.com`     || 华北         | NCN          | `http(s)://upload-z1.qiniup.com`  | `http(s)://up-z1.qiniup.com`  || 华南         | SCN          | `http(s)://upload-z2.qiniup.com`  | `http(s)://up-z2.qiniup.com`  || 北美         | NA           | `http(s)://upload-na0.qiniup.com` | `http(s)://up-na0.qiniup.com` |