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

更新時間：2021年08月27日 09:52:06 作者：一只阿龍

頭像上傳在很多實例中都可以用到，本文主要介紹了Element 頭像上傳，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本篇文章用到 element官網和七牛云官網

element-ui 官網：https://element.eleme.io/#/zh-CN

七牛云官網：https://www.qiniu.com/

1.七牛云注冊登錄之后然后實名認證

在這里插入圖片描述

2.進入對象存儲后進入空間管理

3.新建空間

在這里插入圖片描述

在這里就能拿到 cdn測試域名

python SDK 在開發(fā)者中心可以查看

使用七牛云就需要安裝他

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	必選參數(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ū)對應表**
**七牛的一張存儲區(qū)域表**

| **存儲區(qū)域** | **區(qū)域代碼** | 客戶端上傳地址                    | **服務端上傳地址**            |
| ------------ | ------------ | --------------------------------- | ----------------------------- |
| 華東         | 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 頭像上傳的實戰(zhàn)的文章就介紹到這了,更多相關Element 頭像上傳內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: