Element 头像上传的实战
作者:一只阿龙 发布时间:2024-04-30 10:45:11
标签: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 之后 就可以使用组件了
用户头像上传
<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
0
投稿
猜你喜欢
- 定义临时变量:{% with i=1 %}{{i}}{% endwith %}定义对临时变量操作的tag在templatetags中创建se
- 在Python类中规定,函数的第一个参数是实例对象本身,并且约定俗成,把其名字写为self。其作用相当于java中的this,表示当前类的对
- 作为程序员,我们经常需要对时间进行处理。在 Go 中,标准库 time 提供了对应的能力。本文将介绍 time 库中一些重要的函数和方法,希
- 1,为了获取视频,你应该创建一个 VideoCapture 对象。他的参数可以是设备的索引号,或者是一个视频文件。设备索引号就是在指定要使用
- Telnet 连接方式#!/usr/bin/env python# coding=utf-8import timeimport telnet
- one: declare @s varchar(20) declare @i varchar(20) set @i='' s
- ord是unicode ordinal的缩写,即编号chr是character的缩写,即字符ord和chr是互相对应转换的.但是由于chr局
- 最近认识了一个做Python语音识别的朋友,聊天时候说到,未来五到十年,Python人工智能会在国内掀起一股狂潮,对各种应用的冲击,不下于淘
- 这几天无聊的很看着china.nba.com焦点图效果捣鼓了一下有待完善!兼容性:IE6 , IE7 &nb
- 参考的一些文章以及论文我都会给大家分享出来 —— 链接就贴在原文,论文我上传到资源中去,大家可以免费下载学习,如果当天资源区找不到论文,那就
- 也不一定,以前从来没有深入的研究过sql查询,最近买了一本T-SQL查询的书,把以前忽视的问题都记录一下 以前一直模模糊糊的把sqlserv
- 首先你要明白24bit的bmp图片的基本信息:1像素占3个字节,头部占54个字节。好了,现在开始做验证码了,这里以4位验证码(大小为20(高
- 比如可以定义开学时间为2009年2月8日,然后程序可以算出,今天距开学那天已经是第几周,非常急需这个程序,忘高手们能提供一个,先谢谢了!自己
- 本文主要给大家介绍了关于MySQL服务自动停止的解决方法,分享出来供大家参考学习,下面来一起看看:问题描述服务器上安装的 MySQL,会出现
- 无意中看到以前在电脑上保存的一个html页面,关于div水平垂直居中的问题。如何实现div水平垂直居中呢?1.已知宽高度水平垂直居中posi
- 前言需要注意,对实例化的文本组件的insert、delete等操作的index**都是浮点型而不是整型**,(1.0,2.0)表示的是对第一
- #!/usr/local/python import os import time import string source=['/
- 代码如下:url="http://www.cidianwang.com/" wstr=getHTTPPage(
- 1、例子:拟合一种函数Func,此处为一个指数函数。出处:SciPy v1.1.0 Reference Guide#Headerimport
- 本文实例为大家分享了python实现五子棋游戏的具体代码,供大家参考,具体内容如下话不多说,直接上代码:全部工程文件,在GitHub:五子棋