Element 頭像上傳的實戰(zhàn)
本篇文章用到 element官網(wǎng) 和 七牛云官網(wǎng)
element-ui 官網(wǎng):https://element.eleme.io/#/zh-CN
七牛云官網(wǎng):https://www.qiniu.com/
1.七牛云注冊 登錄 之后 然后實名認(rèn)證
2.進(jìn)入對象存儲后 進(jìn)入空間管理
3.新建空間
在這里就能拿到 cdn測試域名
python SDK 在開發(fā)者中心可以查看
使用七牛云 就需要安裝他
pip install qiniu
我們使用封裝的思想 進(jìn)行封裝使用
文件名:comm.py
# 七牛云 from qiniu import Auth # 需要填寫你的 Access Key 和 Secret Key access_key = 'Access Key ' secret_key = 'Secret Key' def qn_token(): #構(gòu)建鑒權(quán)對象 q = Auth(access_key, secret_key) # 要上傳的空間名字 bucket_name = 'name' # 生成上傳 Token token = q.upload_token(bucket_name) return token
獲取上傳的接口
# 導(dǎo)入封裝好的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 必選參數(shù),上傳的地址 七牛云:http://up-z1.qiniu.com/--> <!-- data 上傳時附帶的額外參數(shù) --> <!-- on-success 文件上傳成功時的鉤子 --> <!-- before-upload 上傳文件之前的鉤子,參數(shù)為上傳的文件,若返回 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> **七牛云的存儲對象的地區(qū)對應(yīng)表** **七牛的一張存儲區(qū)域表** | **存儲區(qū)域** | **區(qū)域代碼** | 客戶端上傳地址 | **服務(wù)端上傳地址** | | ------------ | ------------ | --------------------------------- | ----------------------------- | | 華東 | 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` |
到此這篇關(guān)于Element 頭像上傳的實戰(zhàn)的文章就介紹到這了,更多相關(guān)Element 頭像上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vuejs2.0子組件改變父組件的數(shù)據(jù)實例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯誤,安裝后,需在項目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說明,需要的朋友可以參考下2024-09-09vue中computed下使用箭頭函數(shù)會報錯問題及解決
這篇文章主要介紹了vue中computed下使用箭頭函數(shù)會報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07解決element?ui?cascader?動態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動態(tài)加載回顯問題解決方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08