Element 头像上传的实战
作者:一只阿龙 时间:2024-04-30 10:45:11
本篇文章用到 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 之后 就可以使用组件了
用户头像上传
<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` |
来源:https://blog.csdn.net/weixin_55555564/article/details/119927425
标签:Element,头像上传
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
pytorch GAN生成对抗网络实例
2022-06-30 03:41:27
![](https://img.aspxhome.com/file/2023/7/68397_0s.jpg)
SQL Server中检查字段的值是否为数字的方法
2024-01-24 17:47:21
框架和框架之间的关系
2008-01-17 18:54:00
![](https://img.aspxhome.com/file/UploadPic/20081/17/2008117185848873s.jpg)
精细讲述SQL Server数据库备份多种方法
2009-01-13 13:33:00
Python参数解析器configparser简介
2021-04-22 02:23:31
![](https://img.aspxhome.com/file/2023/1/95781_0s.png)
Windows系统下PhantomJS的安装和基本用法
2022-03-30 11:49:52
![](https://img.aspxhome.com/file/2023/5/72975_0s.png)
请问[\\u4E00-\\u9FA5]是什么正则表达式码
2009-07-10 13:10:00
Windows下mysql 8.0.29 winx64安装配置方法图文教程
2024-01-15 14:07:10
![](https://img.aspxhome.com/file/2023/9/129879_0s.jpg)
Go语言字符串基础示例详解
2023-07-17 03:14:56
![](https://img.aspxhome.com/file/2023/9/90489_0s.png)
Python遗传算法Geatpy工具箱使用介绍
2021-11-02 02:21:16
![](https://img.aspxhome.com/file/2023/8/105598_0s.png)
MySQL 自动清理binlog日志的方法
2024-01-17 11:37:59
PhpStorm配置debug环境的详细过程
2023-05-26 20:04:32
python有几个版本
2021-09-12 00:44:30
发工资啦!教你用Python实现邮箱自动群发工资条
2023-10-12 19:11:17
![](https://img.aspxhome.com/file/2023/1/94141_0s.png)
python中的内置函数max()和min()及mas()函数的高级用法
2023-01-21 18:45:43
![](https://img.aspxhome.com/file/2023/6/76096_0s.jpg)
Oracle 11g数据库安装与卸载的方法图解
2024-01-22 19:54:15
![](https://img.aspxhome.com/file/2023/7/67527_0s.gif)
MySQL身份认证漏洞 升级到5.5.24可修正
2012-07-11 15:54:09
python实现弹跳小球
2022-05-30 08:55:08
![](https://img.aspxhome.com/file/2023/6/110446_0s.png)
python数据分析:关键字提取方式
2022-03-08 09:23:37
Python脚本实现代码行数统计代码分享
2023-02-26 00:24:13
![](https://img.aspxhome.com/file/2023/2/103242_0s.png)