Vant Uploaderは1枚以上の写真をアップロードするコンポーネントを実装します

Vant Uploaderは1枚以上の写真をアップロードするコンポーネントを実装します

この記事では、1枚以上の写真をアップロードするためのVant Uploaderコンポーネントを紹介します。具体的な内容は次のとおりです。

HTML部分

<テンプレート>
  <div class="contWrap">
    <バンアップローダー
      v-model="ファイルリスト"
      :multiple="true"
      :before-read="beforeRead"
      :after-read="afterRead"
      :before-delete="アップロード画像を削除"
      アップロードアイコン="プラス"
    >
    <!-- 注: これはカスタムアップロードスタイルです -->
      <!-- <p>
        <バンアイコン
          名前="プラス"
          カラー=”#07c160”
          サイズ=".5rem"
        />
        写真をアップロード</p> -->
    </van-uploader>
  </div>
</テンプレート>

js部分

<スクリプト>
「axios」からaxiosをインポートします。
エクスポートデフォルト{
  名前: "uploadImages",
  データ() {
    戻る {
      ファイルリスト: [],
      アップロード URL: "/api/upload/fileUpload",
      ヘッダー: {
        トークン: this.$store.state.account.token,
      },
    };
  },

  メソッド: {
    // ブール値を返す beforeRead(file) {
      if (ファイルインスタンス配列) {
        //配列ファイルかどうかを判定します。forEach((v) => {
          this.checkFile(v);
        });
      } それ以外 {
        this.checkFile(ファイル);
      }
      true を返します。
    },
    //画像タイプ checkcheckFile(file) {
      const フォーマット = ["jpg", "png", "jpeg"];
      定数インデックス = file.name.lastIndexOf(".");
      const finalName = file.name.substr(インデックス + 1);
      if (!format.includes(finalName.toLowerCase())) {
        Toast("アップロードしてください" + format.join(",") + "画像をフォーマットしてください");
        false を返します。
      }
    },
    afterRead(ファイル) {
    // この時点で自分でファイルをサーバーにアップロードできます if (file instanceof Array) {
        ファイル.map((v) => {
          v.status = "アップロード中";
          v.message = "アップロード中...";
          this.uploadImg(v);
        });
      } それ以外 {
        file.status = "アップロード中";
        file.message = "アップロード中...";
        this.uploadImg(ファイル);
      }
    },
    //アップロード uploadImg(file) {
      フォームデータを作成します。
      formData.append("ファイル", file.file);
      アクシオス
        .post(this.uploadUrl, フォームデータ, {
          ヘッダー: this.headers、
        })
        .then((res) => {
          (res.data)の場合{
            if (ファイルインスタンス配列) {
              //配列ファイルかどうかを判定します。map((v, i) => {
                v.status = "成功";
                v.メッセージ = "";
                v.url = res.data[i];
              });
            } それ以外 {
              file.status = "成功";
              ファイル.メッセージ = "";
              ファイルのURLをres.data.uploadUrlに設定します。
            }
          }
        })
        .catch((エラー) => {
          これを通知します。{
            タイプ:「警告」、
            メッセージ: 「アップロードに失敗しました」、
          });
        });
    },
    //削除 delUploadImg(item) {
      this.fileList = this.fileList.filter((v) => v.url != item.url);
    }
  },
};
</スクリプト>

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

以下もご興味があるかもしれません:
  • モバイル端末上のVue+Vantのアップローダーは、画像のアップロード、圧縮、回転の機能を実現します。
  • Vant アップローダーは、画像をアップロードするためのドラッグ アンド ドロップ機能を実装します (カバーとして設定)

<<:  VScode設定のリモートデバッグLinuxプログラムの問題を解決する

>>:  単一のMySQLテーブルを復元する手順

推薦する

MySQL 圧縮パッケージ版 zip インストール設定方法

圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...

柔軟で安定した高品質の HTML および CSS コード標準を作成するためのガイド

黄金律常に同じコーディング標準セットに従ってください。同じプロジェクトに何人の人が関わっているかに関...

postcss-pxtorem モバイル適応の実装

コマンドを実行してプラグインpostcss-pxtoremをインストールします npm インストール...

Zabbix ベースの Jenkins プロセス監視の詳細な説明

1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...

jQuery はテーブルのページング効果を実装します

この記事では、テーブルのページング効果を実現するためのjQueryの具体的なコードを参考までに紹介し...

CSS でフロートをクリアするための完全ガイド (要約)

1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

JavaScript でのプロキシの使用を理解するための記事

目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...

Linuxファイル削除後にスペースが解放されない問題の詳しい説明

序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...

Unix/Linux システムにおける nobody ユーザーと nologin の詳細な紹介

Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...

Linux サーバーに埋め込まれた ddgs および qW3xT.2 マイニング ウイルスの対処の実践記録

序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...

MySQL の遅いクエリの例

導入スロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメントを記録で...

Dockerカスタムブリッジdocker0とdockerのコマンド操作の開始、終了、再起動

質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...

Nginx 急ぎ購入 電流制限構成 実装分析

ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...

要素テーブルからヘッダーを削除する方法

show-header属性を使用したドキュメントのヒントshow-header <el-テーブ...