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

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

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。

element-ui 公式サイト: https://element.eleme.io/#/zh-CN

Qiniu Cloud公式サイト:https://www.qiniu.com/

1. Qiniu Cloudに登録してログインした後、本名を認証する必要があります。

ここに画像の説明を挿入

2. オブジェクトストレージに入った後、スペース管理に入る

3. 新しいスペースを作成する

ここに画像の説明を挿入

CDNテストドメイン名はここから取得できます

Python SDKは開発者センターで閲覧できます

Qiniu Cloudを使用するには、インストールする必要があります

pip インストール qiniu

カプセル化にはカプセル化の考え方を使用します

文件名:comm.py

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

Vueで要素をダウンロードしたら、コンポーネントを使用できます

ユーザーアバターのアップロード

<テンプレート>
    <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` |

Elementアバターアップロードの実践的な応用に関するこの記事はこれで終わりです。Elementアバターアップロードの関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue.js+elementUI は、左右の矢印をクリックしてアバターを切り替える機能を実現します(カルーセル画像の効果に似ています)

<<:  MySQL 同時実行制御の原則に関する知識ポイント

>>:  Linuxコマンドに基づいてフォルダー内の特定のファイルパスを抽出します

推薦する

JavaScript 配列を走査する 5 つの方法

目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...

DockerコンテナはホストのMySQL操作にアクセスする

背景:インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...

CentOS 6 は Docker を使用して Zookeeper 操作例を展開します

この記事では、Docker を使用して Centos6 に Zookeeper をデプロイする方法に...

すべてのホストがmysqlにアクセスできるようにする方法

1. MySQLデータベースのユーザーテーブルのレコードのHostフィールド値を%に変更します。奇妙...

MySQL の例 DTID マスタースレーブ原理の分析

目次1. GTIDの基本概念2. GTIDの利点3. GTIDの仕組み4. 従来のレプリケーションに...

Linux環境でユーザーにsudo権限を追加する方法

sudo 設定ファイルsudo のデフォルトの設定ファイルは /etc/sudoers です。一般的...

JavaScript の navigator.userAgent がブラウザ情報を取得するケースの説明

ブラウザはおそらく私たちにとって最も馴染みのあるツールです。 Firefox、Opera、Safar...

モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常に...

Windows システムでの MySQL 8.0.21 インストール チュートリアル (図とテキスト)

インストールの提案: インストールには .exe を使用せず、圧縮パッケージを使用してください。これ...

素晴らしい CSS ナビゲーション バーの下線効果

中国初のカッター github.com/chokcocoまず、ここに画像があります。純粋な CSS ...

プロジェクトに必須の 8 つの JavaScript コード スニペット

目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...

Dockerコンテナ内にkibanaトークナイザーをインストールする方法

ステップ: 1. 仮想マシンディレクトリに新しいdocker-compose.ymlファイルを作成し...

SQLと各種NoSQLデータベースの使用シナリオの説明

SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...

Nginx try_files ディレクティブの使用例

Nginx の設定構文は柔軟で、高度に制御可能です。バージョン 0.7 以降では、try_files...