Vue-Kapselungskomponente Bildkomponente hochladen

<Vorlage>
  <div>
    <el-form>
      <!-- :on-change="Datei hochladen" -->
      <el-hochladen
        :limit="limit" //Die maximal zulässige Anzahl von Uploads Aktion
        accept="image/*" //Upload akzeptieren:on-change="uploadFile" //Funktion bei Änderung des Dateistatuslist-type="picture-card" //Dateilistentyp:auto-upload="false" //Ob nach Auswahl einer Datei sofort hochgeladen werden soll:file-list="fileList" //Virtuelles Dateiarray:on-exceed="handleExceed" //Funktion, wenn die Anzahl der Dateien das Limit überschreitet:on-preview="handlePictureCardPreview" //Funktion beim Klicken auf eine hochgeladene Datei in der Dateiliste:on-remove="handleRemove" //Funktion beim Entfernen einer Datei aus der Dateilisteref="upload"
        Klasse = "Avatar-Uploader"
        :class="{hide:showUpload}" //Wird verwendet, um die Upload-Schaltfläche auszublenden, nachdem das maximale Limit erreicht wurde: disabled="disabled" //Um den Upload-Fehlerprozess anzuzeigen>
        <i class="el-icon-plus"></i>
      </el-upload>
      //Bild anzeigen <el-dialog width="30%" :visible.sync="dialogVisible">
        <img width="100%" :src="imgUrl.url" alt />
      </el-dialog>
      //Wenn Sie nicht direkt hochladen müssen, sondern auf eine Schaltfläche klicken müssen, um das Bild hochzuladen, öffnen Sie bitte diese Methode //Ändern Sie „on-change“ im obigen „el-upload“-Tag in die „http-request“-Methode<!-- <Button text="Upload" type="add_u" style="margin-top: 10px;" @click.native="submitUpload"></Button> -->
    </el-form>
  </div>
</Vorlage>

<Skript>
//Einführung der Schnittstelle zum Hochladen von Bildern import { uploadImg } from "@/api/public/api";
Standard exportieren {
  Requisiten: {
    limit: Anzahl,
    Dateiliste: Array,
    deaktiviert: Boolean,
  },
  Daten() {
    zurückkehren {
      showUpload: false, //Schließe den Upload-Button, nachdem das Maximallimit kontrolliert wurde. dialogVisible: false, //Zeige das Bild-Popup-Fenster. imgUrl: [], //Sammlung von Adressen nach dem Hochladen des Bildes};
  },
  // Das Array der hochgeladenen Bilder abhören (um das Problem der automatischen Darstellung und das Verschwinden der Schaltfläche zum Hochladen beim Ändern zu beheben);
  betrachten:
    Dateiliste(neuerName, alterName) {
      wenn (neuerName.Länge == dieses.Limit) dieses.showUpload = true;
      sonst this.showUpload = false;
    },
  },
  Methoden: {
    //Funktion zum Entfernen von Dateien aus der Dateiliste handleRemove(file, fileList) {
      const index = this.fileList.findIndex((item) => item === file.uid);
      diese.imgUrl.splice(index, 1);
      dies.$emit("delUrl", dies.imgUrl);
      wenn (Dateiliste.Länge < dieses.Limit) dieses.showUpload = false;
    },
    //Funktion beim Anklicken einer hochgeladenen Datei in der Dateiliste handlePictureCardPreview(file) {
      diese.imgUrl.url = Datei.URL;
      this.dialogVisible = true;
    },
    //Dies ist eine Methode zum Hochladen über eine Schaltfläche anstelle des direkten Hochladens submitUpload() {
      dies.$refs.upload.submit();
    },
    //Funktion bei Änderung des Dateistatus (Hauptlogikfunktion)
    uploadFile(e, Dateiliste) {
      //Beurteilen Sie die maximale Anzahl von Benutzer-Uploads, damit die Upload-Schaltfläche verschwindet, wenn (fileList.length >= this.limit) this.showUpload = true;
      // const file = e.file; <- hier ist kein direkter Upload nötig, sondern der Upload erfolgt über den Button const file = e.raw; // <- hier wird direkt hochgeladen // Größe const size = file.size / 1024 / 1024 / 2;
      Wenn (
        !(
          Dateityp === "Bild/png" ||
          Dateityp === "Bild/GIF" ||
          Dateityp === "Bild/jpg" ||
          Dateityp === "Bild/JPEG"
        )
      ) {
        dies.$notify.warning({
          Titel: "Warnung",
          Nachricht:
            „Bitte laden Sie Bilder in den Formaten image/png, image/gif, image/jpg, image/jpeg hoch“,
        });
      } sonst wenn (Größe > 2) {
        dies.$notify.warning({
          Titel: "Warnung",
          Meldung: „Bildgröße muss kleiner als 2 MB sein“,
        });
      } anders {
        if (this.limit == 1) this.imgUrl = []; //Wenn es als Eins beurteilt wird, muss das Array gelöscht werden const params = new FormData();
        params.append("Quelle", Datei);
        uploadImg(params).then((res) => {
        //Die hier zurückgegebene Datenstruktur (ändern Sie diese entsprechend Ihrer eigenen Rückgabestruktur)
          wenn (res.data.status === 1) {
            this.$message.success("Upload erfolgreich");
            diese.imgUrl = res.data;
            //Rufen Sie die Methode der übergeordneten Komponente auf, um den Bildparameter this.$emit("getUrl", this.imgUrl); zu übergeben.
          } sonst this.$message.error("Upload fehlgeschlagen");
        });
      }
    },
    //Funktion, wenn die Anzahl der Dateien den Grenzwert überschreitet handleExceed(files, fileList) {
      this.$message.info(`Es können nur ${this.limit} Bilder hochgeladen werden`);
    },
  },
};
</Skript>

//Ändern Sie die Stile vor und nach dem Hochladen hier (ich finde, dass el-upload nicht gut aussieht und Sie es selbst ändern können)
<Stilbereich>
.hide .el-upload--Bildkarte {
  Anzeige: keine !wichtig;
}
.avatar-uploader > .el-upload {
  Breite: 200px;
  Höhe: 200px;
  Zeilenhöhe: 200px;
  Rahmenradius: 0px;
  Hintergrund: #fff;
  Rand: 1px gestrichelt #ccc;
}
.avatar-uploader > .el-upload > i {
  Schriftgröße: 28px;
  Farbe: #ccc;
}
.avatar-uploader > .el-upload-list {
  Anzeige: Block;
}
.avatar-uploader > .el-upload-list > .el-upload-list__item {
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Block;
}
.avatar-uploader > .el-upload-list > .el-upload-list__item > img {
  Breite: 200px;
  Höhe: 200px;
  Rahmenradius: 0px;
}
</Stil>

//Bild-Upload-Komponente importiere UploadImg von "@/views/common/UploadImg.vue";
Vue.component('Bild hochladen', Bild hochladen)

<el-form-item label="Bild hochladen">
 //Begrenzung der maximalen Anzahl hochzuladender Bilder //fileList Bild-Array //getUrl Hochgeladene Adresse abrufen //delUrl Hochgeladene Adresse löschen // deaktiviert Verarbeitung deaktivieren <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>

//Variablendeklaration data:{
 Dateiliste:[]
 }
//Funktion getUrl(getUrl){
 Konsole.log(getUrl)
 };
delUrl(getUrl){
Konsole.log(getUrl)
};