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

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

<スクリプト>
「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);
    }
  },
};
</スクリプト>