Vue-Komponente kapselt Beispielcode zum Hochladen von Bildern und Videos

<!--UploadImageVideo in Teilen hochladen-->
<Vorlage>
  <div Klasse="BildVideo hochladen">
    <el-hochladen
      Aktion
      :on-change="Handleänderung"
      :on-remove="handleEntfernen"
      :limit="limitDateinummer"
      :on-exceed="HandleÜberschreiten"
      :Dateiliste="_Dateiliste"
      :http-request="handleHttpRequest"
      :before-upload="Vor dem Hochladen handhaben"
      :multiple="istMultiple"
    >
      <el-button slot="trigger" size="small" type="primary">Datei auswählen</el-button>
      <div slot="Tipp" class="el-upload__tip">{{ Tipp }}</div>
    </el-upload>
 
    <el-dialog
      Titel="Upload-Fortschritt"
      :visible.sync="dialogTabelleSichtbar"
      :Schließen bei Klick-Modal="false"
      :modal-append-to-body="false"
    >
      <el-progress :text-inside="true" :stroke-width="26" :percentage="Prozent"></el-progress>
    </el-dialog>
  </div>
</Vorlage>
 
<Skript>
importiere { uuid } von "vue-uuid";
const OSS = erfordern("ali-oss");
 
Standard exportieren {
  Name: "",
  Komponenten: {},
  Requisiten: {
    Region:
      Typ: Zeichenfolge,
      Standard: „oss-cn-chengdu“
    },
    Zugriffsschlüssel-ID: {
      Typ: Zeichenfolge,
      Standard: "xxx"
    },
    Zugriffsschlüsselgeheimnis: {
      Typ: Zeichenfolge,
      Standard: "xxx"
    },
    //Speicherort-Bucket: {
      Typ: Zeichenfolge,
      erforderlich: true
    },
    aktuelleURLs: {
      Typ: Array,
      Standard: () => [],
      erforderlich: true
    },
    //Begrenzung der Anzahl der hochgeladenen Dateien limitFileNumber: {
      Typ: Nummer,
      Standard: 1
    },
    //Ob Mehrfachauswahl unterstützt werden soll isMultiple: {
      Typ: Boolean,
      Standard: false
    },
    //Dateiformat fileType: {
      Typ: Zeichenfolge,
      Standard: ""
    },
    //Tipp: {
      Typ: Zeichenfolge
    }
  },
  Daten() {
    zurückkehren {
      Client: neues OSS({
        Region: diese.Region,
        accessKeyId: diese.accessKeyId,
        accessKeySecret: dieses.accessKeySecret,
        Eimer: dieser.eimer
      }),
      Prozentsatz: 0,
      dialogTableVisible: false,
      Dateiliste: []
    };
  },
  berechnet: {
    //Hinweis: Seien Sie vorsichtig, wenn Sie console.log() zum Drucken in berechneten Eigenschaften verwenden, da es möglich ist, dass die gedruckte Variable von einer bestimmten Eigenschaft abhängt und die berechnete Eigenschaft wiederholt aufgerufen wird! ! ! ! ! !
    _fileList() {
      const arr = [];
      // Stellen Sie sicher, dass this.currentUrls nicht leer ist, da sonst ein Fehler gemeldet wird, if (this.currentUrls.length !== 0) {
        für (const item of this.currentUrls) {
          let { Pfadname } = neue URL (Element);
          arr.push({ Name: decodeURIComponent(Pfadname), URL: Element });
        }
      }
 
      this.fileList = arr; //Diese Codezeile ist sehr wichtig! !
      Rückflug an;
    }
  },
  erstellt() {},
  montiert() {},
  Methoden: {
    handleChange(Datei, Dateiliste) {
      this.fileList = Dateiliste;
    },
    handleRemove(Datei, Dateiliste) {
      this.fileList = Dateiliste;
    },
    handleExceed(Dateien, Dateiliste) {
      diese.$message.warning(
        `Derzeit ist die Auswahl auf ${this.limitFileNumber} Dateien beschränkt, dieses Mal ausgewählt ${
          Dateien.Länge
        } Dateien, ${files.length + fileList.length} Dateien ausgewählt`
      );
    },
 
    //Hinweis: Damit der benutzerdefinierte Upload-HandleHttpRequest wirksam wird, müssen die folgenden Bedingungen erfüllt sein:
    // 1. Setze: auto-upload='true' oder schreibe dieses Attribut nicht, da es standardmäßig auf true gesetzt ist. 2. Setze action='#' oder schreibe die Aktion direkt
    handleHttpRequest(Datei) {
      //Obwohl kein Inhalt vorhanden ist, ist diese Funktion unverzichtbar!
    },
    //Hinweis: Der benutzerdefinierte Upload handleHttpRequest muss wirksam sein, um die Hook-Funktion handleBeforeUpload(file) vor dem Hochladen auszulösen {
      wenn (dieser.Dateityp == "Bild") {
        let { Typ, Größe, Name } = Datei;
        let isJPEG = Typ === "Bild/JPEG";
        let isJPG = Typ === "Bild/JPG";
        let isPNG = Typ === "Bild/png";
        sei isLt5M = Größe / 1024 / 1024 < 5;
        wenn (!istJPEG && !istJPG && !istPNG) {
          this.$message.error("Hochgeladene Bilder können nur im JPEG/JPG/PNG-Format vorliegen!");
          gibt false zurück;
        }
        wenn (!isLt5M) {
          this.$message.error("Die Größe eines einzelnen Bildes darf 5 MB nicht überschreiten!");
          gibt false zurück;
        }
      }
      wenn (dieser.Dateityp == "Video") {
        let { Typ, Größe, Name } = Datei;
        let isMP4 = Typ === "video/mp4";
        sei isLt50M = Größe / 1024 / 1024 < 50;
        wenn (!istMP4) {
          this.$message.error("Hochgeladene Videos können nur im MP4-Format sein!");
          gibt false zurück;
        }
        wenn (!isLt50M) {
          this.$message.error("Die Größe eines einzelnen Videos darf 50 MB nicht überschreiten!");
          gibt false zurück;
        }
      }
    },
    // Daten stückweise hochladen und einen Fortschrittsbalken anzeigen. Laden Sie die umbenannte Datei zu Alioss hoch und geben Sie eine einzelne Datei-URL-Zeichenfolge zurück. Unterstützt chinesische Dateinamen async UploadImageVideo(filename, file) {
      let neuerDateiname =
        Dateiname.split(".")[0] + "-" + uuid.v1() + "." + Dateiname.split(".")[1];
      lass das = dies;
      das.dialogTableVisible = true;
 
      lassen {
        res: { Anfrage-URLs }
      } = warte auf this.client.multipartUpload(newFileName, Datei, {
        Fortschritt: Funktion(p, Prüfpunkt) {
          dieser Prozentsatz = parseFloat((p * 100).toFixed(2));
        }
      });
      wenn (dieser.Prozentsatz == 100) {
        das.dialogTableVisible = false;
      }
      let { Herkunft, Pfadname } = neue URL (requestUrls[0]);
      Herkunft zurückgeben + URI-Komponente dekodieren (Pfadname);
    },
    //Dateien stapelweise hochladen. Gibt ein Array erfolgreich hochgeladener URLs zurück async addFiles() {
      lass urls = [];
      wenn (diese.Dateiliste.Länge !== 0) {
        für (const item dieser.fileList) {
          lass { Name, Rohwert } = Artikel;
          let pathname = warte darauf.UploadImageVideo(name, raw);
          urls.push(Pfadname);
        }
      }
      URLs zurückgeben;
    },
    //Dateidaten aktualisieren. Neue Daten auf den Server hochladen, alte Daten auf dem Server löschen und das aktualisierte URL-Array zurückgeben async UpdateFiles() {
      let arr_newUploaded = []; //Neu hochgeladene Bild-URL.
      let arr_original = []; //Originalbild-URL. Kein Löschen erforderlich, let arr_delete = []; //Die URL des zu löschenden Bildes.
      wenn (diese.Dateiliste.Länge !== 0) {
        für (const { raw, name, url } dieser.fileList) {
          //Hinweis: Es ist wichtig, festzustellen, ob hier Raw vorhanden ist. Wenn es existiert, bedeutet dies, dass es neu hochgeladen wurde. Wenn es nicht existiert, bedeutet dies, dass es das Original ist. if (raw) {
            let pathname = warte darauf.UploadImageVideo(name, raw);
            arr_newUploaded.push(Pfadname);
          }
          wenn (this.currentUrls.includes(url)) {
            arr_original.push(url);
          }
        }
      }
 
      für (const-Element von this.currentUrls) {
        wenn (!arr_original.includes(element)) {
          arr_delete.push(element);
        }
      }
      warte auf dies.deleteMultiFiles(arr_delete);
 
      Rückgabewert [...arr_original, ...arr_newUploaded];
    },
    //Dateien stapelweise auf dem Server löschen. Parameter: Array von URLs der Dateien, die vom Server gelöscht werden sollen.
    asynchrones Löschen mehrerer Dateien (URLs = []) {
      lass arr_pathname = [];
      wenn (urls.length !== 0) {
        für (const item of urls) {
          //Verwenden Sie nicht let url=require("url");url.parse();, es ist ungültig. So verwenden Sie die neue URL()
          let { Pfadname } = neue URL (Element);
          // Die Funktion decodeURIComponent() konvertiert chinesische Zeichen in chinesische arr_pathname.push(decodeURIComponent(pathname));
        }
        //Bilder auf dem Server löschen await this.client.deleteMulti(arr_pathname);
      }
    }
  },
  betrachten: {}
};
</Skript>
 
<style lang="scss" scoped>
.UploadImageVideo {
  /*Entfernen Sie den Übergangseffekt der Upload-Komponente*/
  ::v-deep .el-upload-list__item {
    Übergang: keiner !wichtig;
  }
}
</Stil>

<BildVideo hochladen
  ref="ref_UploadImageVideo"
  Eimer="xxx"
  :currentUrls="formData.imgurl"
  :limitDateinummer="3"
  Tipp="1. Laden Sie bis zu 3 Fotos hoch. 2. Hochgeladene Bilder können nur im JPEG-/JPG-/PNG-Format vorliegen. 3. Die Größe eines einzelnen Bildes darf 5 MB nicht überschreiten!"
  Dateityp="Bild"
  :istMehrfach="wahr"
></UploadImageVideo>

<!--Benutzerverwaltung-->
<Vorlage>
  <div Klasse="Benutzerverwaltung">
    <el-Karte>
      <div Stil="margin-bottom: 10px">
        <el-Eingabe
          v-model="Suchname"
          löschbar
          Platzhalter="Benutzernamen zur Suche eingeben"
          Stil="Breite: 200px; Rand rechts: 10px"
        />
        <el-Schaltfläche
          Größe="mini"
          Typ="Erfolg"
          Symbol="el-icon-search"
          @click="Suchbenutzer(Suchname)"
        >Suchen</el-button>
        <el-Schaltfläche
          Größe="mini"
          Typ="Warnung"
          Symbol="el-icon-refresh-left"
          @click="Suchname = ''"
        >Zurücksetzen</el-button>
        <el-button sizi="mini" @click="handleAdd()" type="primary" icon="el-icon-plus">Hinzufügen</el-button>
        <el-button @click="getUserList()" sizi="mini" icon="el-icon-refresh" style="float: right">Aktualisieren</el-button>
      </div>
      <el-table :data="tableData" border v-loading="wird geladen">
        <el-table-column label="Benutzername" prop="Benutzername" align="center" width="150px"></el-table-column>
        <el-table-column label="Passwort" prop="Passwort" align="center"></el-table-column>
        <el-table-column label="Bild" align="zentriert">
          <template slot-scope="Umfang">
            <div
              Stil="
                Anzeige: Flex;
                Inhalt ausrichten: Abstand herum;
                Flex-Flow: Zeilenumbruch;
              "
            >
              <el-Bild
                Stil="Breite: 50px; Höhe: 50px"
                v-for="(Element, Index) im Bereich.Zeile.imgurl"
                :Schlüssel="Index"
                :src="Artikel"
                :Vorschau-Quellenliste="scope.row.imgurl"
              ></el-image>
              <!-- <a :href="scope.row.imgurl" rel="external nofollow" target="_blank">{{scope.row.imgurl}}</a> -->
            </div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column label="Operation" align="zentriert">
          <template slot-scope="Umfang">
            <el-button size="mini" @click="showEditDialog(scope.row)">
              <i class="el-icon-edit" /> Bearbeiten</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
              <i class="el-icon-delete" /> Löschen</el-button>
          </Vorlage>
        </el-Tabellenspalte>
      </el-Tabelle>
    </el-Karte>
    <UserManageDialog :dialog="dialog" :formData="formData" @addUser="Benutzer hinzufügen" @editUser="editUser"></UserManageDialog>
  </div>
</Vorlage>
 
<Skript>
importiere UserManageDialog aus "./userManageDialog.vue";
importiere { client_alioss, deleteMultiFiles } aus "@/utils/alioss.js";
 
importieren {
  Benutzer hinzufügen,
  getUserList,
  Benutzer bearbeiten,
  Benutzer löschen,
  Benutzersuche
} von "@/api/userManage/index";
Standard exportieren {
  Name: "userManage",
  Komponenten: { UserManageDialog },
  Daten() {
    zurückkehren {
      Suchname: "",
      wird geladen: false,
      Dialog: {
        anzeigen: falsch,
        Titel: ""
      },
      formData: {},
      Tabellendaten: [
        {
          _Ausweis: "",
          Benutzername: "admin",
          Passwort: "123",
          imgurl: []
        }
      ],
      aktuelleBilder: []
    };
  },
  Requisiten: {},
  erstellt() {},
  montiert() {
    dies.getUserList();
  },
  berechnet: {},
  Methoden: {
    //Benutzerliste abrufen async getUserList() {
      dies.isLoading = wahr;
      let { data } = warte auf getUserList();
      diese.tableData = Daten.Daten;
      dies.isLoading = falsch;
    },
 
    //Öffne das neue Benutzerfenster handleAdd() {
      dieser.dialog = {
        zeigen: wahr,
        Titel: "Neuer Benutzer",
        Option: "Hinzufügen"
      };
      diese.formData = {
        Benutzername: "",
        Passwort: "",
        imgurl: []
      };
    },
    //Öffne das Fenster zum Bearbeiten des Benutzers showEditDialog(row) {
      dies.currentImgs = Zeile.imgurl;
 
      dieser.dialog = {
        zeigen: wahr,
        Titel: "Benutzer bearbeiten",
        Option: "Bearbeiten"
      };
      diese.formData = {
        _id: Zeile._id,
        Benutzername: Zeile.Benutzername,
        Passwort: Zeile.Passwort,
        imgurl: Zeile.imgurl
      };
    },
    //Neuen Benutzer hinzufügen async addUser(urls) {
      diese.formData.imgurl = URLs;
 
      warte auf „addUser(this.formData);
      dies.dialog.show = falsch;
      dies.$benachrichtigen({
        Titel: "Erfolg",
        Nachricht: "Benutzer erfolgreich hinzugefügt!",
        Typ: „Erfolg“
      });
      dies.getUserList();
    },
    //Benutzer bearbeiten async editUser(urls) {
      diese.formData.imgurl = URLs;
 
      await editUser(this.formData, this.formData._id); //Aktualisiere die Datenbank, insbesondere die Bild-URL
 
      dies.dialog.show = falsch;
      dies.$benachrichtigen({
        Titel: "Erfolg",
        Meldung: "Benutzer erfolgreich bearbeitet!",
        Typ: „Erfolg“
      });
      dies.getUserList();
    },
    //Benutzer-Handle löschenDelete({ _id }) {
      this.$confirm("Dieser Vorgang löscht die Datei unwiderruflich. Möchten Sie fortfahren?", "Prompt", {
        confirmButtonText: "Bestätigen",
        cancelButtonText: "Abbrechen",
        Typ: „Warnung“
      })
        .then(async () => {
          diese.$nachricht({
            Typ: „Erfolg“,
            Meldung: "Erfolgreich gelöscht!",
            showClose: wahr
          });
          lassen {
            Daten: { imgurl }
          } = warte auf deleteUser(_id);
 
          //Löschen Sie die Datei auf dem Server. Übergeben Sie das zu löschende URL-Array. Warten Sie auf „deleteMultiFiles(imgurl);“
 
          dies.getUserList();
        })
        .fangen(() => {
          diese.$nachricht({
            Typ: "info",
            Nachricht: "Gelöscht",
            showClose: wahr
          });
        });
    },
    //Abfrage nach Benutzernamen async searchUser(searchName) {
      dies.isLoading = wahr;
      let { data } = warte auf searchUser({
        Suchname
      });
      diese.tableData = Daten.Daten;
      dies.isLoading = falsch;
    }
  },
  betrachten: {}
};
</Skript>
 
<style lang="scss" scoped>
.Benutzer verwalten {
}
</Stil> 

<!--userManageDialog -->
<Vorlage>
  <div Klasse="userManageDialog">
    <el-dialog :title="dialog.title" width="45%" :visible.sync="dialog.show" v-if="dialog.show">
      <el-form ref="ref_form_userManage" :model="formData" :rules="Regeln" label-width="100px">
        <el-form-item label="Benutzername" prop="Benutzername">
          <el-input v-model="formData.username" autocomplete="aus" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="Passwort" prop="Passwort">
          <el-input v-model="formData.password" autocomplete="aus" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="Bild" prop="imgurl">
          <!-- Wenn das Attribut fileType nicht geschrieben ist, bedeutet dies, dass sowohl Bilder als auch Videos hochgeladen werden können. fileType="image" bedeutet, dass nur Bilder hochgeladen werden können. fileType="video" bedeutet, dass Sie nur Videos hochladen können -->
          <BildVideo hochladen
            ref="ref_UploadImageVideo"
            Eimer="Eimer-Lijiang-Test"
            :currentUrls="formData.imgurl"
            :limitDateinummer="3"
            Tipp="1. Laden Sie bis zu 3 Fotos hoch. 2. Hochgeladene Bilder können nur im JPEG-/JPG-/PNG-Format vorliegen. 3. Die Größe eines einzelnen Bildes darf 5 MB nicht überschreiten!"
            Dateityp="Bild"
            :istMehrfach="wahr"
          ></UploadImageVideo>
        </el-form-item>
      </el-form>
      <div slot="Fußzeile" class="dialog-footer">
        <el-button @click="dialog.show = false">Abbrechen</el-button>
        <el-Schaltfläche
          v-if="dialog.option == 'Hinzufügen'"
          @click="Benutzer hinzufügen('ref_form_userManage')"
          Typ="primär"
        >OK</el-button>
        <el-Schaltfläche
          v-if="dialog.option == 'bearbeiten'"
          @click="Benutzer bearbeiten('ref_form_userManage')"
          Typ="primär"
        >OK</el-button>
      </div>
    </el-dialog>
  </div>
</Vorlage>
 
<Skript>
importiere UploadImageVideo aus "@/components/UploadImageVideo";
 
Standard exportieren {
  Name: "userManageDialog",
  Komponenten: { UploadImageVideo },
  Requisiten: ["Dialog", "Formulardaten"],
  Daten() {
    zurückkehren {
      Dateiliste: [],
      Regeln:
        Benutzername: [
          { erforderlich: true, Nachricht: "Bitte geben Sie Ihren Benutzernamen ein", Auslöser: "blur" }
        ]
      }
    };
  },
  erstellt() {},
  montiert() {},
  berechnet: {},
  Methoden: {
    addUser(Formularname) {
      dies.$refs[formName].validate(async valid => {
        if (gültig) {
          let urls = warte darauf.$refs["ref_UploadImageVideo"].addFiles();
          dies.$emit("addUser", urls);
        } anders {
          console.log("Fehler beim Senden!!");
          gibt false zurück;
        }
      });
    },
    editUser(Formularname) {
      dies.$refs[formName].validate(async valid => {
        if (gültig) {
          let urls = warte darauf.$refs["ref_UploadImageVideo"].UpdateFiles();
 
          dies.$emit("editUser", urls);
        } anders {
          console.log("Fehler beim Senden!!");
          gibt false zurück;
        }
      });
    }
  },
  betrachten: {}
};
</Skript>
<style lang="scss" scoped>
</Stil> 

importiere { uuid } von 'vue-uuid';
const OSS = erfordern("ali-oss");
 
let client = neues OSS({
    Region: "oss-cn-chengdu",
    accessKeyId: "LTAI5tQPHvixV8aakp1vg8Jr",
    accessKeySecret: "xYyToToPe8UFQMdt4hpTUS4PNxzl9S",
    Eimer: "Bucket-Lijiang-Test",
 
});
 
exportiere const client_alioss = Client;
 
 
//Datei-Array löschen export async function deleteMultiFiles(urls = []) {
    lass arr_pathname = [];
    wenn (urls.length !== 0) {
        für (const-Element von URLs) {
            //Verwenden Sie nicht let url=require("url");url.parse();, es ist ungültig. So verwenden Sie die neue URL()
            let { Pfadname } = neue URL (Element);
            // Die Funktion decodeURIComponent() konvertiert chinesische Zeichen in chinesische arr_pathname.push(decodeURIComponent(pathname));
        }
        warte auf Client.deleteMulti(arr_Pfadname);
    }
} 

Importieren Sie die Anforderung von „@/utils/request“.
// Benutzerliste abrufen Exportfunktion getUserList() {
    Rückgabeanforderung({
        URL: „/API/UserManage“,
        Methode: 'get'
    })
}
 
// Einen neuen Benutzer hinzufügen Exportfunktion addUser(data) {
    Rückgabeanforderung({
        URL: „/api/userManage“,
        Methode: 'post',
        Daten
    })
}
 
// Benutzer bearbeiten Exportfunktion editUser(data, _id) {
    Rückgabeanforderung({
        URL: `/api/userManage/${_id}`,
        Methode: 'put',
        Daten
    })
}
 
// Benutzer löschen Exportfunktion deleteUser(_id) {
    Rückgabeanforderung({
        URL: `/api/userManage/${_id}`,
        Methode: 'löschen'
    })
}
 
// Abfrage nach Schlüsselwort export function searchUser(data) {
    Rückgabeanforderung({
        URL: `/api/userManage/search`,
        Methode: 'get',
        Parameter: Daten
    })
} 

const router = erfordern('koa-router')()
 
const User = require("../models/User"); //Modulmodell einführen router.prefix('/userManage')
 
//Benutzerliste abrufen router.get('/', async (ctx, next) => {
    let data = warte auf User.find({})
    ctx.body = {
        Code: 200,
        Meldung: "Anfrage erfolgreich",
        Daten,
    }
})
//Neuen Benutzer hinzufügen router.post('/', async (ctx, next) => {
    let { Benutzername, Passwort, imgurl } = ctx.request.body;
    warte auf User.create({ Benutzername, Passwort, imgurl })
    ctx.body = { code: 200, message: "Erfolgreich hinzugefügt" }
})
//Benutzer bearbeiten router.put('/:_id', async (ctx, next) => {
    let { Benutzername, Passwort, imgurl } = ctx.request.body;
    let { _id } = ctx.params
 
    warte auf User.findByIdAndUpdate(_id, { Benutzername, Passwort, imgurl })
    ctx.body = { code: 200, message: "Erfolgreich bearbeitet" }
})
//Benutzer löschen router.delete('/:_id', async (ctx, next) => {
    let { _id } = ctx.params;
    let { imgurl } = warte auf User.findByIdAndDelete(_id).
    ctx.body = { Code: 200, Nachricht: „Erfolgreich gelöscht“, imgurl }
 
})
 
//Benutzer anhand von Schlüsselwörtern abfragen. Fuzzy-Abfrage router.get('/search', async (ctx, next) => {
    let { Suchname } = ctx.request.query;
 
    let data = warte auf User.find({ Benutzername: { $regex: Suchname } })
    ctx.body = { Code: 200, Nachricht: "Abfrage erfolgreich", Daten }
})
module.exports = Router