Übung zum Hochladen von Element-Avataren

pip installieren qiniu

# Qiniu Cloud von qiniu import Auth

# Sie müssen Ihren Zugangsschlüssel und Ihren Geheimschlüssel eingeben
access_key = 'Zugriffsschlüssel '
secret_key = 'Geheimer Schlüssel'

def qn_token():
    #Authentifizierungsobjekt erstellen q = Auth(access_key, secret_key)
    # Der Name des hochzuladenden Speicherplatzes bucket_name = 'name'
    # Upload-Token generieren
    Token = q.upload_token(Bucketname)
    Rückgabetoken

# Importieren Sie das gepackte Token
von utils.comm importiere qn_token

#Qiniu Cloud erhält die Token-Schnittstellenklasse GetQnToken(APIView):
    def get(selbst, Anfrage):
        Token = qn_token()
        Antwort zurückgeben({'code':200,'token':token})

von django.urls Importpfad
aus. Ansichten importieren 


URL-Muster = [
    Pfad('gettoken/', Ansichten.GetQnToken.as_view())
]

<Vorlage>
    <div>
        <!-- Aktion ist ein erforderlicher Parameter, die Upload-Adresse ist Qiniu Cloud: http://up-z1.qiniu.com/-->
        <!-- Zusätzliche Parameter beim Hochladen von Daten einbezogen-->
        <!-- on-success Hook wenn die Datei erfolgreich hochgeladen wurde-->
        <!-- before-upload ist der Hook vor dem Hochladen von Dateien. Der Parameter ist die hochgeladene Datei. Wenn false zurückgegeben wird oder Promise zurückgegeben und abgelehnt wird, wird der Upload gestoppt. -->
        <el-hochladen
            Klasse = "Avatar-Uploader"
            Aktion="http://up-z1.qiniu.com/"  
            :Dateiliste anzeigen="false"
            :bei-Erfolg="handleAvatarSuccess"
            :before-upload="vorAvatarUpload"
            :data='postData'>
            <img v-if="Bild-URL" :src="Bild-URL" Klasse="Avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</Vorlage>

<Skript>
Axios von „Axios“ importieren
Standard exportieren {
    Daten() {
        zurückkehren {
            Bild-URL: '',
            postData:{
                // Beim Hochladen müssen Sie den beigefügten Token mitbringen
                Zeichen:''
            }
        }
    },
    Methoden: {
        // Qiniu Cloud-Token abrufen
        getToken(){
            dies.axios.get('sadmin/gettoken/').then(res=>{
                konsole.log(res.daten)
                dieses.postData.token = res.data.token
            })
        },
        //Hook für erfolgreichen Dateiupload handleAvatarSuccess(res, file) {
            this.imageUrl = 'CDN-Testdomänenname' + res.key;
            Konsole.log(diese.Bild-URL)
        },
        vorAvatarUpload(Datei) {
            const isJPG = Datei.Typ === 'Bild/jpeg';
            const isLt2M = Dateigröße / 1024 / 1024 < 2;

            wenn (!istJPG) {
            this.$message.error('Hochgeladene Avatarbilder können nur im JPG-Format sein!');
            }
            wenn (!isLt2M) {
            this.$message.error('Die Größe des hochgeladenen Avatarbildes darf 2 MB nicht überschreiten!');
            }
            Rückgabewert ist JPG und isLt2M;
        }
    },
    erstellt() {
        dies.getToken()
    }
}
</Skript>

<Stilbereich>
.avatar-uploader .el-upload {
    Rand: 1px gestrichelt #d9d9d9;
    Rahmenradius: 6px;
    Cursor: Zeiger;
    Position: relativ;
    Überlauf: versteckt;
  }
  .avatar-uploader .el-upload:hover {
    Rahmenfarbe: #409EFF;
  }
  .avatar-uploader-icon {
    Schriftgröße: 28px;
    Farbe: #8c939d;
    Breite: 178px;
    Höhe: 178px;
    Zeilenhöhe: 178px;
    Textausrichtung: zentriert;
  }
  .avatar {
    Breite: 178px;
    Höhe: 178px;
    Anzeige: Block;
  }
</Stil>

**Regionale Korrespondenztabelle der Qiniu Cloud-Speicherobjekte**
**Ein Lagertisch von Qiniu**

| **Speicherbereich** | **Regionalcode** | Client-Upload-Adresse| **Server-Upload-Adresse** |
| ------------ | ------------ | --------------------------------- | ----------------------------- |
| Ostchina | ECN | `http(s)://upload.qiniup.com` | `http(s)://up.qiniup.com` |
| Nordchina | NCN | `http(s)://upload-z1.qiniup.com` | `http(s)://up-z1.qiniup.com` |
| Südchina | SCN | `http(s)://upload-z2.qiniup.com` | `http(s)://up-z2.qiniup.com` |
| Nordamerika | NA | `http(s)://upload-na0.qiniup.com` | `http(s)://up-na0.qiniup.com` |