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テーブルを復元する手順

推薦する

良いリファクタリングを行うには、コードをリファクタリングするだけでなく、人生をリファクタリングすることも重要です。

職業的な観点からも、人生の観点からも、良い再建をすることは本当に簡単ではありません。楽観的で熱心で前...

Linux で crontab を使用してスケジュールされたタスクを追加する方法

序文Linux システムはシステム サービス crond によって制御されます。 Linux システ...

CentOS7 に MySQL をオフラインでインストールする詳細なチュートリアル

1. 元のmariadbを削除します。削除しないとmysqlをインストールできません。 mariad...

Echarts バー水平棒グラフのサンプルコード

目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...

テーブルを使用してフォームコントロールの形式を調整し、見栄えを良くします。

自分でウェブページを書きたいので、HTML 言語についても少し勉強しています。これは、大学時代にウェ...

VMWare仮想マシンのcentosの時間が現地時間と矛盾する問題を解決する

VM Ware 仮想マシン CentOS の時刻は、次の図に示すように、現地時間と一致しません。おそ...

MySQLはIDに適切なデータ型を選択します

目次分散IDソリューションの概要データベース自動増分IDデータベースマルチマスターモード数値セグメン...

vue3 タイムスタンプ変換 (フィルターを使用せずに)

vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

JavaScriptのクローン作成についての簡単な説明

目次1. 浅いクローニング2. ディープクローニング1. 浅いクローニング浅いクローンでは配列やオブ...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明

目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...

CSS3 を使用したテキスト折り紙効果のサンプルコード

序文この記事では主に、CSS3 を使用してテキスト折り紙効果を実現する例を紹介します。これは、参考と...

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...

React Nativeのカスタムルーティング管理に関する深い理解

目次1. カスタムルーティング2. タブナビゲーション3. データの返却要約する1. カスタムルーテ...