Vue カプセル化コンポーネント アップロード画像コンポーネント

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。具体的な内容は次のとおりです。

アップロードされていないステータス

アップロードステータス

その他のステータス(表示/削除)

カスタムコンポーネントファイル名 - ここでは UploadImg.vue と呼ばれます

<テンプレート>
  <div>
    <el-form>
      <!-- :on-change="アップロードファイル" -->
      <el-アップロード
        :limit="limit" //アップロードできる最大数アクション
        accept="image/*" //アップロードを受け入れる:on-change="uploadFile" //ファイルの状態が変わったときの関数list-type="picture-card" //ファイルリストの種類:auto-upload="false" //ファイルを選択したらすぐにアップロードするかどうか:file-list="fileList" //仮想ファイル配列:on-exceed="handleExceed" //ファイル数が制限を超えたときの関数:on-preview="handlePictureCardPreview" //ファイルリストでアップロードしたファイルをクリックしたときの関数:on-remove="handleRemove" //ファイルリストからファイルを削除するときの関数ref="upload"
        クラス="アバターアップローダー"
        :class="{hide:showUpload}" // 最大制限に達した後にアップロード ボタンを非表示にするために使用されます: disabled="disabled" // アップロード失敗プロセスを表示するには>
        <i class="el-icon-plus"></i>
      </el-アップロード>
      //画像を表示 <el-dialog width="30%" :visible.sync="dialogVisible">
        <img width="100%" :src="imgUrl.url" alt />
      </el-ダイアログ>
      // 直接アップロードする必要はないが、ボタンをクリックして画像をアップロードする必要がある場合は、このメソッドを開いてください // 上記の el-upload タグの on-change を http-request メソッドに変更します<!-- <Button text="Upload" type="add_u" style="margin-top: 10px;" @click.native="submitUpload"></Button> -->
    </el-form>
  </div>
</テンプレート>

<スクリプト>
// アップロード画像インターフェースを導入する import { uploadImg } from "@/api/public/api";
エクスポートデフォルト{
  小道具: {
    制限: 数、
    ファイルリスト: 配列、
    無効: ブール値、
  },
  データ() {
    戻る {
      showUpload: false, // 最大制限を制御した後、アップロードボタンを閉じます dialogVisible: false, // 画像のポップアップボックスを表示します imgUrl: [], // 画像をアップロードした後のアドレスの収集};
  },
  //アップロードされた写真の配列をリッスンします (自動レンダリングの問題と、変更時にアップロード ボタンが消える問題に対処するため)。
  時計:
    ファイルリスト(新しい名前、古い名前) {
      newName.length == this.limit の場合、 this.showUpload = true;
      それ以外の場合は this.showUpload = false;
    },
  },
  メソッド: {
    //ファイルリストからファイルを削除する関数 handleRemove(file, fileList) {
      const index = this.fileList.findIndex((item) => item === file.uid);
      this.imgUrl.splice(インデックス、1);
      this.$emit("delUrl", this.imgUrl);
      fileList.length < this.limit の場合、 this.showUpload = false;
    },
    //ファイルリストでアップロードされたファイルをクリックしたときの機能 handlePictureCardPreview(file) {
      this.imgUrl.url = ファイル.url;
      this.dialogVisible = true;
    },
    //これは直接アップロードするのではなく、ボタン経由でアップロードする方法です。submitUpload() {
      this.$refs.upload.submit();
    },
    //ファイルステータスが変化したときの機能(メインロジック機能)
    アップロードファイル(e, ファイルリスト) {
      // アップロード ボタンを非表示にするユーザー アップロードの最大数を判断 if (fileList.length >= this.limit) this.showUpload = true;
      // const file = e.file; <- ここでは直接アップロードする必要はなく、ボタンからアップロードします const file = e.raw; // <- ここでは直接アップロードされます // サイズ const size = file.size / 1024 / 1024 / 2;
      もし (
        !(
          ファイルタイプ === "image/png" ||
          ファイルタイプ === "image/gif" ||
          ファイルタイプ === "image/jpg" ||
          ファイルタイプ === "image/jpeg"
        )
      ){
        this.$notify.warning({
          タイトル: 「警告」、
          メッセージ:
            「image/png、image/gif、image/jpg、image/jpeg の形式で画像をアップロードしてください」
        });
      } そうでない場合 (サイズ > 2) {
        this.$notify.warning({
          タイトル: 「警告」、
          メッセージ:「画像サイズは2M未満でなければなりません」
        });
      } それ以外 {
        if (this.limit == 1) this.imgUrl = []; // 1つと判断する場合は、配列をクリアする必要があります const params = new FormData();
        params.append("ソース", ファイル);
        アップロードImg(params).then((res) => {
        //ここで返されるデータ構造(独自の戻り構造に応じて変更してください)
          (res.data.status === 1)の場合{
            this.$message.success("アップロードに成功しました");
            this.imgUrl = res.data;
            //親コンポーネント メソッドを呼び出して、画像パラメータを渡します。this.$emit("getUrl", this.imgUrl);
          } そうでない場合 this.$message.error("アップロードに失敗しました");
        });
      }
    },
    //ファイル数が制限を超えた場合の関数 handleExceed(files, fileList) {
      this.$message.info(`アップロードできる写真は ${this.limit} 枚のみです`);
    },
  },
};
</スクリプト>

//ここでアップロード前とアップロード後のスタイルを変更します(el-upload は見栄えが良くないので、自分で変更することもできます)
<スタイル スコープ>
.hide .el-upload--picture-card {
  表示: なし !重要;
}
.avatar-uploader > .el-upload {
  幅: 200ピクセル;
  高さ: 200px;
  行の高さ: 200px;
  境界線の半径: 0px;
  背景: #fff;
  境界線: 1px 破線 #ccc;
}
.avatar-uploader > .el-upload > i {
  フォントサイズ: 28px;
  色: #ccc;
}
.avatar-uploader > .el-upload-list {
  表示: ブロック;
}
.avatar-uploader > .el-upload-list > .el-upload-list__item {
  幅: 200ピクセル;
  高さ: 200px;
  表示: ブロック;
}
.avatar-uploader > .el-upload-list > .el-upload-list__item > img {
  幅: 200ピクセル;
  高さ: 200px;
  境界線の半径: 0px;
}
</スタイル>

ページ内での使用 - (ここではよく使うので、グローバルなものを記述します。自分のプロジェクトに合わせて決めてください)

メイン.js

//画像アップロードコンポーネント import UploadImg from "@/views/common/UploadImg.vue";
Vue.component('アップロード画像', アップロード画像)

デモ.vue

<el-form-item label="写真をアップロード">
 //アップロードする画像の最大数を制限します //fileList 画像配列 //getUrl アップロードされたアドレスを取得します //delUrl アップロードされたアドレスを削除します // disabled 処理を無効にします <UploadImg :limit="1" :file-list="fileList" @getUrl="getUrl($event,'Parameters you need to carry')" @delUrl="delUrl($event,'Parameters you need to carry')" :disabled="true" />
</el-form-item>

//変数宣言データ:{
 ファイルリスト:[]
 }
//関数 getUrl(getUrl){
 コンソールログ(getUrl)
 };
delUrl(getUrl){
コンソールログ(getUrl)
};

この記事がお役に立てれば幸いです!!

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueはファイルアップロード機能を実装します
  • Vueを使用して写真をアップロードする3つの方法
  • Vue axios でフォームデータを送信する(ファイルのアップロードを含む)
  • モバイル端末上のVue+Vantのアップローダーは、画像のアップロード、圧縮、回転の機能を実現します。
  • Vue+elementUI はフォームと画像のアップロードおよび検証機能の例を実装します
  • vue+elementUIは画像アップロード機能を実現します
  • ファイルアップロード機能を実装するには、vue で input[type="file"] を使用します。
  • Vueの携帯電話カメラと写真アルバムの呼び出しとアップロードの詳細な説明
  • Vue アップロード コンポーネント vue シンプル アップローダーの使用例
  • Vue で Excel ファイルのアップロードとダウンロード機能を実装する 2 つの方法

<<:  Zabbix を使用して Oracle データベースを監視する方法の詳細な説明

>>:  XHTML+CSS Web ページ作成における美しいスタイルシートの適用

推薦する

MySQL8の再帰メソッドの使い方を教える

以前、カスタム関数を使用して MySQL でツリー構造を再帰的にクエリする方法についての記事を書きま...

Vueでフォームデータを取得する方法

目次必要データを取得して送信するテンプレートフィルターフィルターの使用シナリオ要約する必要Vue を...

VMware 15.5 に CentOS7 をインストールするためのグラフィック チュートリアル

1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...

Vue はスクロール可能なポップアップウィンドウ効果を実装します

この記事では、スクロール可能なポップアップウィンドウ効果を実現するためのVueの具体的なコードを参考...

MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています

MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...

フォーム要素とプロンプトテキストが揃っていない問題

最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...

Zookeeperスタンドアロン環境とクラスタ環境の構築

1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...

JavaScript で円形のプログレスバー効果を実装する

この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...

基本的なウェブページパフォーマンス最適化ルールの簡単な概要

ブラウザのウェブページを最適化するためのいくつかのルールページの最適化静的リソース圧縮ビルド ツール...

Vue v-model 関連の知識のまとめ

​v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...

ES6 Promiseの使い方の詳細な説明

目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...

CentOS 8 カスタム ディレクトリ インストール nginx (チュートリアルの詳細)

1. ツールとライブラリをインストールする# PCRE は、Perl 互換の正規表現ライブラリを含...

JavaScript セレクター関数 querySelector および querySelectorAll

目次1. querySelectorは単一の要素を照会する1. ドキュメントインスタンスの呼び出し2...

vue3 のストアを使用してスクロール位置を記録する例

目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...

MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更

この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...