Vue implementiert Drag & Drop oder Klicken zum Hochladen von Bildern

<Vorlage>
    <!--upload.vue Klicken Sie hier, um die Komponente hochzuladen-->
    <div Klasse="Dateiselektor">
        <z-btn Klasse="selector-btn" Farbe="primary" @click="handleUpClick">
            Datei auswählen</z-btn>
        <Eingabe
            ref="Eingabe"
            Klasse="Dateiauswahl-Eingabe"
            Typ="Datei"
            :mehrere="mehrere"
            :accept="akzeptieren"
            @change="Dateien verwalten"
        />
    </div>
</Vorlage>
<Skript>
    importiere {debounce} aus „lodash/function“;
    Standard exportieren {
        Daten() {
            zurückkehren {
                akzeptieren: '.jpg,.jpeg,.png,.gif',
                mehrere: falsch,
                list: [], // Ausgewähltes Dateiobjekt uploadFinished: true, // Upload-Status startIndex: 0, // Start-Upload-Index, wird zum Anhängen von Dateien verwendet maxSize: 10 * 1024 * 1024, //10M (Größe in Bytes)
                // Quelle: this.$axios.CancelToken.source(), // Axios bricht Anfrage ab};
        },
        Methoden: {
            // Zurücksetzen reset() {
                diese.liste = [];
                diese.Quelle.abbrechen();
                dies.startIndex = 0;
                this.uploadFinished = wahr;
                dies.$refs.input && (dies.$refs.input.value = null);
            },
            // Rufen Sie die Upload-Funktion handleUpClick auf: debounce(function () {
                // Sie können hier einen Upload-Status verwalten und die Upload-Schaltfläche während des Upload-Vorgangs deaktivieren. // if (!this.uploadFinished) this.$message.info('Die vorherige Datei wird überschrieben~');
                dies.$refs.input.click();
            }, 300),
            handleFiles(e) {
                const Dateien = e?.target?.files;
                dies.readFiles(Dateien);
            },
            // Verarbeiten Sie die Dateien vor dem Hochladen zu Objekten readFiles(files) {
                if (!files || files.length <= 0) {
                    zurückkehren;
                }
                für (const Datei von Dateien) {
                    const url = window.URL.createObjectURL(Datei);
                    const obj = {
                        Titel: file.name.replace(/(.*\/)*([^.]+).*/ig, '$2'), // entferne die Dateisuffix-URL,
                        Datei,
                        Dateityp: Dateityp,
                        Status: 0, // Status-> 0 Warten, 1 Abgeschlossen, 2 Hochladen, 3 Hochladen fehlgeschlagen Prozent: 0, // Upload-Fortschritt};
                    // Definieren Sie die Liste vorab in den Daten, um die hochzuladenden Dateien zu speichern. this.list.unshift(obj);
                    dies.$emit('fileList', diese.list);
                }
                // Definieren Sie den StartIndex in den Daten zunächst auf 0 und aktualisieren Sie ihn nach Abschluss des Uploads, um die hochgeladene Datei anzuhängen // this.startUpload(this.startIndex);
            },

        }
    };
</Skript>
<style lang="scss">
.Dateiselektor {
    .selector-btn {
        &:schweben {
            Hintergrundfarbe: rgba($color: #2976e6, $alpha: 0,8);
            Übergang: Hintergrund 180 ms;
        }
    }

    &-Eingabe {
        Anzeige: keine;
    }
}
</Stil>

<Vorlage>
    <!-- Upload-Dialog -->
    <Formulardialog
        v-Modell="$attrs.Wert"
        :title="Titel"
        hartnäckig
        :wird geladen="wird geladen"
        maxBreite="600px"
        Mindesthöhe = '400px'
        @cancel="Abbrechen"
        @confirm="handleSenden"
    >
        <div
            Klasse = "d-flex flex-row justify-space-between">
            <z-form style='Breite: 260px; Höhe: 100%;'>
                <form-item label="Bildname" erforderlich>
                    <z-Textfeld
                        v-model="formData.name"
                        umrissen
                        :Regeln="Regeln"
                        :deaktiviert='deaktiviert'
                        Platzhalter="Bitte geben Sie den Namen des Bildes ein"
                    >
                    </z-Textfeld>
                </form-item>
                <form-item label="Beschreibung" erforderlich>
                    <z-Textbereich
                        v-model="formData.description"
                        umrissen
                        :deaktiviert='deaktiviert'
                        Platzhalter="Bitte geben Sie eine Beschreibung ein"
                        Stil="Größenänderung: keine;"
                    >
                    </z-textarea>
                </form-item>
            </z-form>
            <div ref="pickerArea" Klasse="rightBox">
                <div Klasse = "uploadInputs d-flex flex-column justify-center align-center" :Klasse = "[ ziehen ? 'ziehen' : '']">
                    <div ref="uploadBg" class="uploadBg my-2"></div>
                    <hochladen
                        ref="uploadBtn"
                        @fileList='Dateiliste'
                    ></hochladen>
                    <div class="tip mt-2">Klicken Sie auf die Schaltfläche „Hochladen“ oder ziehen Sie die Datei zum Hochladen in das Feld</div>
                    <div class="tinyTip ">Bitte wählen Sie eine Datei, die nicht größer als 10 MB ist</div>
                </div>
            </div>
        </div>

    </form-dialog>

</Vorlage>
<Skript>
    importiere {debounce} aus „lodash/function“;
    Upload von „./upload“ importieren;
    importiere {uploadImage} von '@/wv-main-admin/apis/image';

    Standard exportieren {
        Komponenten:
            hochladen
        },
        Requisiten: ['Dialogdaten'],
        Daten() {
            zurückkehren {
                DialogFlag: '',
                Titel: 'Bild hinzufügen/bearbeiten',
                wird geladen: falsch,
                formData: {
                    Name: '',
                    Beschreibung: ''
                },
                deaktiviert: false,
                Regeln: [v => !!v || 'Erforderlich'],
                Daten: {},
                dragging: true, //Ob gezogen werden soll bindDrop: false,
                Dateiinfo: {},
            };
        },

        montiert() {

        },
        vorZerstören() {
            // Löse die Bindung des Drag-Ereignisses, bevor die Komponente zerstört wird. try {
                const dropbox = dies.$refs.pickerArea;
                : dropbox.removeEventListener('drop', this.handleDrop);
                dropbox.removeEventListener('dragleave', this.handleDragLeave);
                dropbox.removeEventListener('dragover', this.handleDragOver);
                dies.bindDrop = falsch;
            } catch (e) { console.log(e, '=======Ich bin eine Ausnahme beim Aufheben der Bindung des Drag-Ereignisses, bevor die Komponente zerstört wird'); }
        },
        Methoden: {
            //Abbrechen handleCancle() {
                // Schließen Sie das aktuelle Popup-Fenster this.$emit('input', false);
                // Komponente zum Aktualisieren zwingen.$forceUpdate();
            },
            handleSubmit: Entprellung(Funktion () {
                //Eine einzelne Datei hochladen const flag = this.checkMustsItem();
                wenn (Flagge) {
                    dies.startUpload();
                    //Upload abgeschlossen, Komponente zum Aktualisieren zwingen.$forceUpdate();
                }
            }, 300),

            //Wert der Unterkomponente fileList(data) abhören {
                diese.fileInfo = Daten[0];
                dieser.formData.name = dieser.fileInfo.title;
                const uploadBg = this.$refs.uploadBg;
                //Hintergrundbild ändern uploadBg.style.backgroundImage = `url(${this.fileInfo.url})`;
            },
            bindEvents() {
                const dropbox = dies.$refs.pickerArea;
                // Um ​​doppelte Bindungsereignisse zu verhindern, müssen Sie bindDrop in den Daten auf false initialisieren
                wenn (!dropbox || dies.bindDrop) { return; }
                // Binden Sie das Drag-Ereignis und lösen Sie die Bindung, wenn die Komponente zerstört wird. dropbox.addEventListener('drop', this.handleDrop, false);
                dropbox.addEventListener('dragleave', this.handleDragLeave);
                dropbox.addEventListener('dragover', this.handleDragOver);
                dies.bindDrop = wahr;
            },
            // In den Upload-Bereich ziehen handleDragOver(e) {
                e.stopPropagation();
                e.preventDefault();
                dies.ziehen = wahr;
            },
            // Uploadbereich verlassen handleDragLeave(e) {
                e.stopPropagation();
                e.preventDefault();
                dies.dragging = falsch;
            },
            //Ziehen beendet handleDrop(e) {
                e.stopPropagation();
                e.preventDefault();
                dies.dragging = falsch;
                const-Dateien = e.dataTransfer.files;
                // Rufen Sie die Upload-Funktion der <upload/>-Komponente auf this.$refs.uploadBtn && this.$refs.uploadBtn.readFiles(files);
            },
            // Die Datei muss vor dem Hochladen überprüft werden checkFile(index) {
                const Datei = diese.Liste[Index];
                // Wenn die Datei nicht existiert, werden alle Dateien hochgeladen if (!file) {
                    //Upload abgeschlossen, Erfolgsereignis an die übergeordnete Komponente weiterleiten this.uploadFinished = true;
                    dies.$emit('Erfolg', diese.Liste);
                    // Löschen Sie den Wert im Upload-Steuerelement, um sicherzustellen, dass das Änderungsereignis normal ausgelöst werden kann. this.$refs.input.value = null; this.startIndex = index > 1 ? index - 1 : 0;
                    gibt false zurück;
                }

                // Prüfen, ob es hochgeladen wurde if (`${file.status}` === '1') {
                    dies.startUpload(++index);
                    gibt false zurück;
                }

                // Dateigröße prüfen, wenn (this.maxSize && file.file && file.file.size >= this.maxSize) {
                    dies.startUpload(++index);
                    gibt false zurück;
                }

                gibt true zurück;
            },
            checkMustsItem() {
                wenn (!diese.fileInfo.file) {
                    this.$message.warning('Bitte laden Sie die Datei hoch!');
                    gibt false zurück;
                } wenn (!this.formData.name) {
                    this.$message.warning('Bitte geben Sie den Dateinamen ein!');
                    gibt false zurück;
                } wenn (!this.formData.description) {
                    this.$message.warning('Bitte geben Sie die Dateibeschreibung ein!');
                    gibt false zurück;
                }
                gibt true zurück;
            },
            // Eine einzelne Datei hochladen startUpload() {
                dies.laden = wahr;
                Konstante Parameter = {
                    Typ: "Bild"
                };
                dies.$set(params, 'Datei', dies.fileInfo.datei);
                dies.$set(params, 'name', dies.formData.name);
                dies.$set(params, 'Beschreibung', dies.formData.Beschreibung);
                Bild hochladen(Parameter)
                    .then(res => {
                        dies.laden = falsch;
                        wenn (res.code === 0) {
                            this.$message.success('Hochladen erfolgreich~');
                            dies.$emit('refreshList', false);
                            dies.$emit('Eingabe', falsch);
                        }
                    })
                    .fangen(() => {
                        dies.laden = falsch;
                    });
                // dies.$axios({
                // URL: this.url, // Upload-Schnittstelle, übergeben von props// Methode: 'post',
                // Daten,
                // mit Anmeldeinformationen: true,
                // cancelToken: this.source.token, // wird verwendet, um die Schnittstellenanforderung abzubrechen // // Fortschrittsbalken // onUploadProgress: e => {
                // if (fileObj.status === 1) { return; } // Hochgeladen // // Der Maximalwert ist auf 99% begrenzt
                // const p = parseInt((e.loaded / e.total) * 99);
                // wenn (e.total) {
                // fileObj.status = 2; // Hochladen // fileObj.percent = p; // Upload-Fortschritt aktualisieren // } else {
                // fileObj.status = 3; // Hochladen fehlgeschlagen// }
                // },
                // })
                // .dann(Antwort => {
                // wenn (`${response.code}` === '200') {
                // DateiObj.status = 1;
                // DateiObj.Prozent = 100;
                // } anders {
                // DateiObj.status = 3;
                // }
                // })
                // .catch(e => {
                // console.log(e, '====Fehler');
                // DateiObj.status = 3;
                // })
                // .finally(e => {
                // console.log(e, '====Fehler');

                // dies.startUpload(++index);
                // });
                // Hochladen abgeschlossen},
        },
    };
</Skript>

<style lang='scss' scoped>
    .rechteBox {
        Breite: 260px;
        Höhe: 250px;
        Rand: 1px durchgezogen #ccc;
        Rand oben: 18px;

        .uploadBg {
            Breite: 150px;
            Höhe: 125px;
            Hintergrund: URL("../../../../assets/upload.png") keine Wiederholung Mitte Mitte;
            Hintergrundgröße: enthalten;
        }
        .Tipp {
            Schriftgröße: 13px;
            Farbe: rgba(0, 0, 0, 0,87);
        }
        .kleineSpitze {
            Schriftgröße: 12px;
            Farbe: #8e8f9e;
        }
    }

</Stil>