Vollbild-Drag-Upload-Komponente basierend auf Vue3

const ele = document.querySelector('body')
ele.addEventListener('dragenter', (e) => {
  // etwas tun
})

    <hochladen
      accept=".jpg,.png,.ico" // Dateityp festlegen @onChange="change" // Datei-Upload-Ereignis action="http://localhost:3001/upload" // Upload-Adresse: header="header" // Hochgeladener Header
      autoUpload //Ob automatisch hochgeladen werden soll name="file" //Name des hochgeladenen Felds @onSuccess="onSuccess" //Upload erfolgreicher Rückruf></upload>

// Standardmäßige Drag-Events deaktivieren Funktion disableDefaultEvents() {
  const doc = Dokument.Dokumentelement
  doc.addEventListener('dragleave', (e) => e.preventDefault()) //Wegziehendoc.addEventListener('drop', (e) => e.preventDefault()) //Ziehen und ablegendoc.addEventListener('dragenter', (e) => e.preventDefault()) //Hineinziehendoc.addEventListener('dragover', (e) => e.preventDefault()) //Hin- und herziehen}

e.target.nodeName === 'HTML', dies wird verwendet, um zu bestimmen, ob das Stammelement HTML ist
e.target === e.explicitOriginalTarget Dies ist eine Firefox-spezifische API, die bestimmt, ob die Ziele der beiden auslösenden Ereignisse konsistent sind (!e.fromElement &&
        (z. B. ClientX <= 0 ||
          e.clientY <= 0 ||
          e.clientX >= Fenster.innereWidth ||
e.clientY >= window.innerHeight))

// Initialisiere die Drag-Event-Funktion init() {
    // Holen Sie sich das Body-Element const ele = document.querySelector('body')
  // Ereignis hinzufügen // Drag & Drop ele.addEventListener('dragenter', () => {
    show.value = wahr
  })
  // Hier wird ermittelt ob die Maus weggezogen wirdele.addEventListener('dragleave', (e) => {
    Wenn (
      e.target.nodeName === 'HTML' ||
      e.Ziel === e.explicitOriginalZiel ||
      (!e.fromElement &&
        (z. B. ClientX <= 0 ||
          e.clientY <= 0 ||
          e.clientX >= Fenster.innereWidth ||
          e.clientY >= window.innerHeight))
    ) {
      show.value = falsch
    }
  })
  //Ziehen Sie es hineinele.addEventListener('drop', (e) => {
    show.value = falsch
    e.preventDefault()
    onDrop(e) // Methode zum Ziehen und Verarbeiten von Dateien})
}

// Dateityp prüfen Funktion checkType(file, accept = '') {
  const { Typ, Name } = Datei
  wenn (akzeptieren.Länge === 0) true zurückgeben
  const Erweiterung = name.indexOf('.') > -1 ? `.${name.split('.').pop()}` : ''
  const baseType = Typ.replace(/\/.*$/, '')
  zurücknehmen
    .Teilt(',')
    .map((Typ) => Typ.trim())
    .filter((Typ) => Typ)
    .some((akzeptierterTyp) => {
      wenn (/\..+$/.test(akzeptierterTyp)) {
        Rückgabeerweiterung === akzeptierter Typ
      }
      wenn (/\/\*$/.test(akzeptierterTyp)) {
        return Basistyp === akzeptierter Typ.replace(/\/\*$/, '')
      }
      wenn (/^[^/]+\/[^/]+$/.test(akzeptierterTyp)) {
        Rückgabetyp === akzeptierter Typ
      }
    })
}

Funktion onDrop(e) {
  const akzeptieren = props.accept
  const list = [].slice.call(e.dataTransfer.files).filter((Datei) => {
    wenn (akzeptieren) {
      returniere checkType(Datei, akzeptieren)
    }
    returniere wahr
  })
  Dateiliste = Liste.map((p) => {
    Rückgabewert handleStart(p)
  })
  // Ereignis beiÄnderung() auslösen
  wenn (props.autoUpload) {
    wenn (Eigenschaften.Aktion === '') {
      beiFehler()
      werfen Sie "brauchen Aktion"
      zurückkehren
    }
    list.forEach((Datei) => {
      post(file) // Datei hochladen })
  }
}

<Vorlage>
  <div Klasse="Maske" v-show="Anzeige" id="Maske">
    <h3>Zum Hochladen hierher ziehen</h3>
  </div>
</Vorlage>
<Skript-Setup>
importiere { ref, reaktiv, onMounted } von 'vue'
// Ajax aus „./ajax“ importieren
const props = defineProps({
  Name: String, // hochgeladener Feldname Header: { Object, Number, String }, // hochgeladener Dateiheader // zu prüfender Dateityp, wenn ein Wert vorhanden ist, werden nur alle Dateien hineingezogen und nur die Dateien nach der Filtereinstellung bleiben erhalten Akzeptieren: {
    Typ: Zeichenfolge,
    Standard: '',
  },
  // Ob der automatische Upload aktiviert werden soll autoUpload: {
    Typ: Boolean,
    Standard: false,
  },
  // Aktion zum Hochladen der Adresse: {
    Typ: Zeichenfolge,
    Standard: '#',
  },
})

const emit = defineEmits(['onError', 'onProgress', 'onSuccess', 'onChange']) // Standard-Emit-Ereignis let show = ref(false) // ob die Maske angezeigt werden soll let fileList = reactive([]) // Dateiliste let tempIndex = 0 // Markierung setzen onMounted(() => {
  disableDefaultEvents()
  init()
})
// Initialisiere die Drag-Event-Funktion init() {
  const ele = document.querySelector('body')
  ele.addEventListener('dragenter', () => {
    show.value = wahr
  }) //Ziehen und Ablegenele.addEventListener('dragleave', (e) => {
    Wenn (
      e.target.nodeName === 'HTML' ||
      e.Ziel === e.explicitOriginalZiel ||
      (!e.fromElement &&
        (z. B. ClientX <= 0 ||
          e.clientY <= 0 ||
          e.clientX >= Fenster.innereWidth ||
          e.clientY >= window.innerHeight))
    ) {
      show.value = falsch
    }
  }) //Wegziehenele.addEventListener('drop', (e) => {
    show.value = falsch
    e.preventDefault()
    beim Ablegen(e)
  }) // reinziehen }
// Standardmäßige Drag-Events deaktivieren Funktion disableDefaultEvents() {
  const doc = Dokument.Dokumentelement
  doc.addEventListener('dragleave', (e) => e.preventDefault()) //Wegziehendoc.addEventListener('drop', (e) => e.preventDefault()) //Ziehen und ablegendoc.addEventListener('dragenter', (e) => e.preventDefault()) //Hineinziehendoc.addEventListener('dragover', (e) => e.preventDefault()) //Hin- und herziehen}
//Drag-In-Ereignisfunktion onDrop(e) {
  const akzeptieren = props.accept
  const list = [].slice.call(e.dataTransfer.files).filter((Datei) => {
    wenn (akzeptieren) {
      returniere checkType(Datei, akzeptieren)
    }
    returniere wahr
  })
  Dateiliste = Liste.map((p) => {
    Rückgabewert handleStart(p)
  })
  beiÄnderung()
  wenn (props.autoUpload) {
    wenn (Eigenschaften.Aktion === '') {
      beiFehler()
      werfen Sie "brauchen Aktion"
      zurückkehren
    }
    list.forEach((Datei) => {
      post(Datei)
    })
  }
}
// Dateityp prüfen Funktion checkType(file, accept = '') {
  const { Typ, Name } = Datei
  wenn (akzeptieren.Länge === 0) true zurückgeben
  const Erweiterung = name.indexOf('.') > -1 ? `.${name.split('.').pop()}` : ''
  const baseType = Typ.replace(/\/.*$/, '')
  zurücknehmen
    .Teilt(',')
    .map((Typ) => Typ.trim())
    .filter((Typ) => Typ)
    .some((akzeptierterTyp) => {
      wenn (/\..+$/.test(akzeptierterTyp)) {
        Rückgabeerweiterung === akzeptierter Typ
      }
      wenn (/\/\*$/.test(akzeptierterTyp)) {
        return Basistyp === akzeptierter Typ.replace(/\/\*$/, '')
      }
      wenn (/^[^/]+\/[^/]+$/.test(akzeptierterTyp)) {
        Rückgabetyp === akzeptierter Typ
      }
    })
}
// Dateiliste verarbeiten Rückgabewert Funktion handleStart(rawFile) {
  rawFile.uid = Date.now() + tempIndex++
  zurückkehren {
    Status: 'bereit',
    Name: Rohdatei.name,
    Größe: rawFile.size,
    Prozentsatz: 0,
    uid: Rohdatei.uid,
    raw: Rohdatei,
  }
}
//Upload-Ereignisfunktion post(rawFile) {
  const Optionen = {
    Überschriften: props.header,
    Datei: rawFile,
    Daten: props.data || '',
    Dateiname: props.name || 'Datei',
    Aktion: Requisiten.Aktion,
  }
  hochladen (Optionen)
    .then((res) => {
      res.json()
    })
    .then((json) => {
      bei Erfolg(json, rawFile)
    })
    .catch((err) => {
      beiFehler(Fehler, Rohdatei)
    })
}
// Datei-Upload-Methode Funktion upload(option) {
  const Aktion = Option.Aktion

  const formData = new FormData()

  wenn (Option.Daten) {
    Objekt.Schlüssel(Option.Daten).fürJeden((Schlüssel) => {
      formData.append(Schlüssel, option.data[Schlüssel])
    })
  }
  formData.append(option.dateiname, option.datei, option.dateiname)

  const headers = neue Header()
  für (Element in Headern lassen) {
    wenn (headers.hasOwnProperty(item) && headers[item] !== null) {
      headers.append(i, option.headers[i])
    }
  }
  returniere fetch(Aktion, {
    Modus: „no-cors“,
    Textkörper: Formulardaten,
    Überschriften: Überschriften,
    Methode: 'post',
  })
}

// Zum Abrufen der Dateiliste ziehen. Ereignisfunktion onChange() {
  emittieren('beiÄnderung', Dateiliste)
}
//Hochladen des Ereignisses Funktion onProgress(e, file) {
  emit('onProgress', e, Datei, Dateiliste)
}
// Upload-Erfolgsereignisfunktion onSuccess(res, file) {
  emittieren('onProgress', res, Datei, Dateiliste)
}
// Upload fehlgeschlagen Ereignisfunktion onError() {
  emittieren('beiFehler')
}
</Skript>
<Stilbereich>
.Maske {
  oben: 0;
  unten: 0;
  rechts: 0;
  links: 0;
  Position: fest;
  Z-Index: 9999;
  Deckkraft: 0,6;
  Textausrichtung: zentriert;
  Hintergrund: #000;
}
h3 {
  Rand: -0,5em 0 0;
  Position: absolut;
  oben: 50 %;
  links: 0;
  rechts: 0;
  -webkit-transform: übersetzeY(-50%);
  -ms-transform: übersetzenY(-50%);
  transformieren: verschiebeY(-50%);
  Schriftgröße: 40px;
  Farbe: #fff;
  Polsterung: 0;
}
</Stil>