Element 頭像上傳的實戰

pip install qiniu

# 七牛雲
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())
]

<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` |