Vant Uploader implementiert die Komponente zum Hochladen eines oder mehrerer Bilder

<Vorlage>
  <div Klasse="contWrap">
    <van-uploader
      v-model="Dateiliste"
      :mehrere="wahr"
      :before-read="vordemLesen"
      :after-read="nachdemLesen"
      :before-delete="delUploadImg"
      Upload-Symbol = "plus"
    >
    <!-- Hinweis: Dies ist ein benutzerdefinierter Upload-Stil-->
      <!-- <p>
        <van-Symbol
          Name="plus"
          Farbe: #07c160
          Größe=".5rem"
        />
        Foto hochladen</p> -->
    </van-uploader>
  </div>
</Vorlage>

<Skript>
importiere Axios von „Axios“;
Standard exportieren {
  Name: "uploadImages",
  Daten() {
    zurückkehren {
      Dateiliste: [],
      uploadUrl: "/api/upload/DateiUpload",
      Überschriften: {
        Token: this.$store.state.account.token,
      },
    };
  },

  Methoden: {
    // Booleschen Wert zurückgeben beforeRead(file) {
      if (Dateiinstanz des Arrays) {
        //Beurteilen, ob es sich um ein Array handelt file.forEach((v) => {
          dies.checkFile(v);
        });
      } anders {
        this.checkFile(Datei);
      }
      gibt true zurück;
    },
    //Bildtyp checkcheckFile(file) {
      const-Format = ["jpg", "png", "jpeg"];
      const index = file.name.lastIndexOf(".");
      const finalName = Datei.Name.substr(Index + 1);
      wenn (!format.includes(finalName.toLowerCase())) {
        Toast("Bitte hochladen" + format.join(",") + "Bild formatieren");
        gibt false zurück;
      }
    },
    nachLesen(Datei) {
    // Sie können die Datei jetzt selbst auf den Server hochladen, if (file instanceof Array) {
        datei.map((v) => {
          v.status = "Hochladen";
          v.message = "Hochladen...";
          dies.uploadImg(v);
        });
      } anders {
        file.status = "Hochladen";
        file.message = "Hochladen...";
        this.uploadImg(Datei);
      }
    },
    //Hochladen uploadImg(Datei) {
      const formData = new FormData();
      formData.append("Datei", Datei.Datei);
      Achsen
        .post(this.uploadUrl, formData, {
          Header: diese.header,
        })
        .then((res) => {
          wenn (res.data) {
            if (Dateiinstanz des Arrays) {
              //Beurteilen, ob es sich um ein Array handelt file.map((v, i) => {
                v.status = "Erfolg";
                v.Nachricht = "";
                v.url = res.data[i];
              });
            } anders {
              Datei.status = "Erfolgreich";
              Datei.Nachricht = "";
              Datei.URL = res.data.uploadUrl;
            }
          }
        })
        .catch((err) => {
          dies.$benachrichtigen({
            Typ: "Warnung",
            Meldung: "Upload fehlgeschlagen",
          });
        });
    },
    //löschen delUploadImg(item) {
      diese.fileList = diese.fileList.filter((v) => v.url != item.url);
    }
  },
};
</Skript>