头像上传在很多实例中都可以用到，本文主要介绍了Element 头像上传，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本篇文章用到 element官网 和 七牛云官网
element-ui 官网：https://element.eleme.io/#/zh-CN
七牛云官网：https://www.qiniu.com/
1.七牛云注册 登录 之后 然后实名认证
2.进入对象存储后 进入空间管理
3.新建空间
在这里就能拿到 cdn测试域名
python SDK 在开发者中心可以查看
使用七牛云 就需要安装他
pip install qiniu
我们使用封装的思想 进行封装使用
文件名：comm.py
# 七牛云 from qiniu import Auth # 需要填写你的 Access Key 和 Secret Key access_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
获取上传的接口
# 导入封装好的token from 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 path from . import views urlpatterns = [ path('gettoken/',views.GetQnToken.as_view()) ]
在vue中下载好 element 之后 就可以使用组件了
用户头像上传
<div> <!-- action 必选参数，上传的地址 七牛云：http://up-z1.qiniu.com/--><!-- data 上传时附带的额外参数 --><!-- on-success 文件上传成功时的钩子 --><!-- before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 --> <i class="el-icon-plus avatar-uploader-icon"></i></div> .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: 28p<div>本文来源gaodai.ma#com搞#代!码网_</div>x; 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` |
以上就是Element 头像上传的实战的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Element 头像上传的实战
转载请注明原文链接：Element 头像上传的实战
