エレメントアバターアップロード練習

pip インストール qiniu

# Qiniu Cloud から qiniu をインポート Auth

# アクセスキーとシークレットキーを入力する必要があります
access_key = 'アクセスキー'
secret_key = '秘密鍵'

qn_token()を定義します:
    #認証オブジェクトを構築 q = Auth(access_key, secret_key)
    # アップロードするスペースの名前 bucket_name = 'name'
    # アップロードトークンを生成する
    トークン = q.upload_token(バケット名)
    トークンを返す

# パッケージ化されたトークンをインポートする
utils.comm から qn_token をインポート

#Qiniu Cloud はトークン インターフェース クラス GetQnToken(APIView) を取得します。
    def get(self, request):
        トークン = qn_token()
        レスポンスを返す({'code':200,'token':token})

django.urls インポートパスから
から。インポートビュー 


urlパターン = [
    パス('gettoken/'、views.GetQnToken.as_view())
]

<テンプレート>
    <div>
        <!-- action は必須パラメータです。アップロード アドレスは Qiniu Cloud: http://up-z1.qiniu.com/ です-->
        <!-- データのアップロード時に含まれる追加パラメータ -->
        <!-- on-success ファイルが正常にアップロードされたときにフックします-->
        <!-- before-upload は、ファイルをアップロードする前のフックです。パラメータはアップロードされたファイルです。false が返されるか、Promise が返されて拒否された場合、アップロードは停止されます。 -->
        <el-アップロード
            クラス="アバターアップローダー"
            アクション="http://up-z1.qiniu.com/"  
            :ファイルリストを表示="false"
            :on-success="アバターハンドル成功"
            :before-upload="アバターをアップロードする前"
            :data='投稿データ'>
            <img v-if="imageUrl" :src="imageUrl" class="アバター">
            <i v-else class="el-icon-plus アバターアップローダーアイコン"></i>
        </el-アップロード>
    </div>
</テンプレート>

<スクリプト>
'axios' から axios をインポートします
エクスポートデフォルト{
    データ（） {
        戻る {
            画像URL: ''、
            投稿データ:{
                // アップロード時には添付のトークンを持参する必要があります
                トークン：''
            }
        }
    },
    メソッド: {
        // Qiniu Cloud トークンを取得する
        トークンを取得する(){
            this.axios.get('sadmin/gettoken/').then(res=>{
                コンソールログ(res.data)
                this.postData.token = res.data.token
            })
        },
        //ファイルのアップロード成功のためのフック handleAvatarSuccess(res, file) {
            this.imageUrl = 'cdn テストドメイン名' + res.key;
            console.log(この画像URL)
        },
        beforeAvatarUpload(ファイル) {
            const isJPG = file.type === 'image/jpeg';
            定数isLt2M = ファイルサイズ / 1024 / 1024 < 2;

            もし(!isJPG) {
            this.$message.error('アップロードできるアバター画像は JPG 形式のみです!');
            }
            もし (!isLt2M) {
            this.$message.error('アップロードされたアバター画像のサイズは 2MB を超えることはできません!');
            }
            isJPG && isLt2M; を返します。
        }
    },
    作成された() {
        this.getToken()
    }
}
</スクリプト>

<スタイルスコープ>
.アバターアップローダー .el-アップロード {
    境界線: 1px 破線 #d9d9d9;
    境界線の半径: 6px;
    カーソル: ポインタ;
    位置: 相対的;
    オーバーフロー: 非表示;
  }
  .avatar-uploader .el-upload:hover {
    境界線の色: #409EFF;
  }
  .アバターアップローダーアイコン {
    フォントサイズ: 28px;
    色: #8c939d;
    幅: 178ピクセル;
    高さ: 178px;
    行の高さ: 178px;
    テキスト配置: 中央;
  }
  .アバター{
    幅: 178ピクセル;
    高さ: 178px;
    表示: ブロック;
  }
</スタイル>

**Qiniu Cloud ストレージオブジェクトの地域対応表**
**Qiniuの保管エリア表**

| **ストレージ領域** | **リージョン コード** | クライアント アップロード アドレス| **サーバー アップロード アドレス** |
| ------------ | ------------ | --------------------------------- | ----------------------------- |
| 中国東部 | 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` |