Element|Element 头像上传的实战 Element头像上传的实战

本篇文章用到 element官网和七牛云官网
element-ui 官网：https://element.eleme.io/#/zh-CN
七牛云官网：https://www.qiniu.com/
1.七牛云注册登录之后然后实名认证
【Element|Element 头像上传的实战】
文章图片

2.进入对象存储后进入空间管理
3.新建空间

文章图片

在这里就能拿到 cdn测试域名
python SDK 在开发者中心可以查看
使用七牛云就需要安装他

pip install qiniu

我们使用封装的思想进行封装使用
文件名：comm.py

# 七牛云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'# 生成上传 Tokentoken = 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())]

在vue中下载好 element 之后就可以使用组件了
用户头像上传

.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; }**七牛云的存储对象的地区对应表****七牛的一张存储区域表**| **存储区域** | **区域代码** | 客户端上传地址| **服务端上传地址**|| ------------ | ------------ | --------------------------------- | ----------------------------- || 华东| 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` |