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 ページ作成における美しいスタイルシートの適用

推薦する

vue+echartsチャートの使用に関する問題記録

序文echarts は私が最もよく使用するチャート作成ツールであり、非常に完全なエコシステムとコンテ...

Web データ ストレージ: Cookie、UserData、SessionStorage、WebSqlDatabase

クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...

ホストサービスにアクセスするDockerでのサービスの実装

目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...

フロントエンド開発における一般的なテクニックのまとめ

1. 記事タイトルリストの右側に日付を表​​示する方法:コードをコピーコードは次のとおりです。 &l...

Linux RabbitMQ クラスタ構築プロセス図

1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...

ARM64アーキテクチャでmysql5.7.22をインストールするプロセス全体

MySQLダウンロードアドレス: https://obs.cn-north-4.myhuaweicl...

js SMS認証コード入力ボックスを手動で実装する

序文この記事では、私が手動で実装したフロントエンドの一般的な SMS 認証コード入力コンポーネントと...

TypeScript インターフェースの紹介

目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...

Linuxでディスク使用量を確認する方法

1. dfコマンドを使用してディスク全体の使用量を表示します。 df コマンドは、ハードディスクのマ...

MySql テーブル、データベース、シャーディング、パーティショニングの知識ポイントの紹介

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

MySQLとOracleの誤解の詳細な説明

目次本質的な違いデータベースセキュリティ権限スキーマの移行パターンオブジェクトの類似性スキーマオブジ...

フレックスレイアウトでコンテナ内のコンテンツを維持するためのソリューションの詳細な説明

モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整...

CentOS7.8 に mysql 8.0.20 をインストールするための詳細なチュートリアル

1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...

HTMLの水平線注釈とコードコメントの使い方をマスターするだけです

水平線<hr /> タグを使用して、現在の位置に水平の分割線を描画します。例: XML/...