亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Element 頭像上傳的實戰(zhàn)

 更新時間:2021年08月27日 09:52:06   作者:一只阿龍  
頭像上傳在很多實例中都可以用到,本文主要介紹了Element 頭像上傳,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本篇文章用到 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)文章

  • vue路由守衛(wèi)+登錄態(tài)管理實例分析

    vue路由守衛(wèi)+登錄態(tài)管理實例分析

    這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結(jié)合實例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關(guān)操作步驟與實現(xiàn)技巧,需要的朋友可以參考下
    2019-05-05
  • vuejs2.0子組件改變父組件的數(shù)據(jù)實例

    vuejs2.0子組件改變父組件的數(shù)據(jù)實例

    本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)

    vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)

    在Vue3中使用拖拽功能時應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯誤,安裝后,需在項目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說明,需要的朋友可以參考下
    2024-09-09
  • vue中computed下使用箭頭函數(shù)會報錯問題及解決

    vue中computed下使用箭頭函數(shù)會報錯問題及解決

    這篇文章主要介紹了vue中computed下使用箭頭函數(shù)會報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • Vue3 diff算法之雙端diff算法詳解

    Vue3 diff算法之雙端diff算法詳解

    雙端Diff在可以解決更多簡單Diff算法處理不了的場景,且比簡單Diff算法性能更好。本文將通過示例為大家詳細(xì)講講雙端diff算法的實現(xiàn)與使用,需要的可以參考一下
    2022-09-09
  • 解決element?ui?cascader?動態(tài)加載回顯問題

    解決element?ui?cascader?動態(tài)加載回顯問題

    這篇文章主要介紹了element?ui?cascader?動態(tài)加載回顯問題解決方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • vue父組件點擊觸發(fā)子組件事件的實例講解

    vue父組件點擊觸發(fā)子組件事件的實例講解

    下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • Vue實現(xiàn)菜單切換功能

    Vue實現(xiàn)菜單切換功能

    這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)菜單切換功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • 使用Vue寫一個datepicker的示例

    使用Vue寫一個datepicker的示例

    這篇文章主要介紹了使用Vue寫一個datepicker的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • 快速將Vue項目升級到webpack3的方法步驟

    快速將Vue項目升級到webpack3的方法步驟

    這篇文章主要給大家介紹了關(guān)于如何快速將Vue項目升級到webpack3的方法步驟文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-09-09

最新評論