Vant Uploader implementiert die Drag-and-Drop-Funktion zum Hochladen von Bildern (als Cover festlegen)

Das Wirkungsdiagramm sieht wie folgt aus:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <link rel="stylesheet" href="public/vant/index.css" rel="externes nofollow" >
    <script src="public/vue.min.js"></script>
    <script src="public/vant/vant.min.js"></script>
    <script src="public/sortable/Sortable.min.js"></script>
    <script src="public/draggle/vuedraggable.umd.js"></script>

</Kopf>
<Stil>
    .img_uploader{Anzeige: flex;}
    .img_upload span {Anzeige: -webkit-box;Anzeige: -webkit-flex;Anzeige: flex;-webkit-flex-wrap: Wrap;Flex-Wrap: Wrap;}
    .img_upload_item {position: relativ;rand: 0 8px 8px 0;cursor: Zeiger;}
    .preview-cover {Position: absolut;unten: 0;Boxgröße: Rahmenbox;Breite: 100 %;Polsterung: 4px;Farbe: #fff;Schriftgröße: 12px;Textausrichtung: zentriert;Hintergrund: rgba(0, 0, 0, 0,3);}
    .van-image__error,.van-image__img,.van-image__loading {Objekt-fit: cover;}
</Stil>

<Text>
    <div id="app">
        <div Klasse="img_uploader">
            <van-uploader :after-read="beimLesen"> </van-uploader>
            <draggable class="img_upload" v-model="fileList" :group="{name:'imgs'}" @end="end" animation="200">
                <Übergangsgruppe>
                    <div Klasse="img_upload_item" v-for="(Element,Index) in Dateiliste" :Schlüssel="Index" @click="VorschauBild(Dateiliste,Index)">
                        <div Klasse="van-image van-uploader__preview-image">
                            <img :src="item.content" alt="Bild" class="van-image__img">
                            <div Klasse="van-uploader__preview-cover">
                                <div class="preview-cover van-ellipsis" v-if="index == 0">Titelbild</div>
                            </div>
                        </div>
                        <div Klasse="van-uploader__preview-delete" @click="delImg(index)">
                            <i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
                        </div>
                    </div>
                </Übergangsgruppe>
            </ziehbar>
        </div>
    </div>
</body>
<Skript>
    var app = new Vue({
        el: "#app",
        Komponenten:
            vuedraggable: window.vuedraggable, //Drag-Komponente auf der aktuellen Seite registrieren},
        Daten() {
            zurückkehren {
                Dateiliste: [
                    {Inhalt: 'https://img01.yzcdn.cn/vant/leaf.jpg',Name: '12'},
                    {Inhalt: 'images/banner1.png',Name: '12'},
                    {Inhalt: 'images/banner2.png',Name: '12'},
                    {Inhalt: 'images/banner3.png',Name: '12'},
                    {Inhalt: 'images/banner4.png',Name: '12'},
                ],
            }
        },
        Methoden: {
            // Bild löschen delImg(index) {
                wenn (isNaN(index) || index >= diese.dateiliste.länge) {
                    return false
                }
                lass tmp = []
                für (sei i = 0, len = this.fileList.length; i < len; i++) {
                    wenn (diese.fileList[i] !== diese.fileList[index]) {
                        tmp.push(diese.Dateiliste[i])
                    }
                }
                diese.fileList = tmp
            },
            onRead(Datei) { // Lade das Bild auf den Bilderserver hoch this.fileList.push(Datei) 
                console.log(Datei)
            },
            // Klicken, um Vorschau anzuzeigen previewImg(images, index) {
                lass listSrc = [];
                diese.fileList.forEach(Funktion(v,i){
                    listSrc.push(v.Inhalt)
                })
                vant.Bildvorschau({
                    Bilder:listSrc,
                    Startposition: Index,
                    schließbar:true
                });
            },
            // Holen Sie sich die Daten, die gerade gezogen wurden, nachdem der Drag beendet wurde end(e) {
                var _oldIndex = e.oldIndex
                var _oldItem = diese.Dateiliste[_oldIndex]
                console.log(_oldItem);
            },
        }
    })
</Skript>

</html>

Dies ist das Ende dieses Artikels über die Verwendung des Vant-Uploaders zum Hochladen von Bildern per Ziehen und Ablegen (als Cover festlegen). Weitere Informationen zum Hochladen von Bildern mit dem Vant-Uploader finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Vant Uploader implementiert die Komponente zum Hochladen eines oder mehrerer Bilder
Der Uploader von Vue+Vant auf dem mobilen Endgerät realisiert die Funktionen des Hochladens, Komprimierens und Drehens von Bildern

<<: HTML-Tabellen-Markup-Tutorial (38): Rahmenfarben-Attribut der Kopfzeile BORDERCOLOR

>>: Beschreibung der Standardtransaktionsisolationsebene von MySQL und Oracle