Beispiel für das Hochladen von Dateien mit Vue unter Verwendung des Formattyps „formData“

Beispiel für das Hochladen von Dateien mit Vue unter Verwendung des Formattyps „formData“

In Vue haben wir im Allgemeinen Front-End- und Back-End-Trennungsprojekte, dh wir müssen Tools wie Axios verwenden, um Anforderungen an den Hintergrund zu senden und Datenvorgänge zu implementieren.
Unter diesen ist das Hochladen von Dateien relativ schwierig. In diesem Artikel erfahren Sie, wie Sie in fünf Minuten Dateien hochladen.

1. Wenn Sie beispielsweise Bilder hochladen, muss das Backend Daten vom Typ formData vom Frontend übertragen

<el-button type="primary" @click="uploadFile2()">Zum Hochladen klicken</el-button>
 <Eingabetyp="Datei" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data" Stil="Anzeige: keine;" akzeptieren="Bild/jpeg,Bild/png,Bild/gif">

Um dies zu erreichen, verwenden wir native Eingaben.

uploadFile2(){
	// Dieses Ereignis wird ausgelöst, wenn auf die Schaltfläche geklickt wird. // Die Funktion dient zum Öffnen des Popup-Fensters zum Hochladen von Dateien. this.$refs.uploadFile2.click()
   },
   fileValueChange2(){
   // Nach Auswahl der Datei wird das Eingabeänderungsereignis ausgelöst und diese Funktion wird aufgerufen var formData = new FormData()
     // this.$refs.uploadFile2 ist die Methode zum Abrufen von DOM-Elementen in Vue // Alle hochgeladenen Dateien können über Dateien abgerufen werden. Wenn mehrere Dateien vorhanden sind, formData.append('file',this.$refs.uploadFile2.files[0])
     // Anforderungstyp muss festgelegt werden formData.append('type', "head");
     // Wenn Sie die ID übergeben müssen, beziehen Sie sich auf den folgenden Code formData.append('id', this.id);
     // Nachdem die Konfiguration abgeschlossen ist, müssen Sie nur noch die Variable formData an das Backend übergeben insertNavigationUpload(formData).then(res=>{
       console.log('Ist es einfach? Mein Freund')
     })
   },

Fast hätte ich einen Schritt vergessen. Zur sekundären Kapselung von Axios-Anfragen werde ich nicht viel sagen. Ich zeige hier nur die Schnittstelle.

exportiere const tMessageNotification = data =>{
  Rückgabeanforderung({
    URL: „/tMessageNotification/upload“,
    Methode: 'POST',
    Daten,
    Header: {'Inhaltstyp': 'application/json'},
  })
}

Dies ist das Ende dieses Artikels über Vue, das den Formattyp formData zum Hochladen von Dateien verwendet. Weitere relevante Inhalte zum Hochladen von Vue-Dateien finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • So laden Sie Dateien (FormData) mit Axios in Vue hoch
  • Vue formData realisiert den Bild-Upload
  • Vue verwendet formData, um Daten an den Hintergrund zu senden
  • Vuejs verwendet FormData, um den Ajax-Upload von Bilddateien zu implementieren
  • vue+element_ui lädt Dateien hoch und übergibt zusätzliche Parameter
  • Detaillierte Erklärung zum Hochladen von Dateien in das Hintergrundbeispiel in Vue
  • Vue Element UI + OSS zur Realisierung der Funktion zum Hochladen von Dateien

<<:  Detaillierter Prozess zum Erstellen von mysql5.7.29 unter Centos7 von Linux

>>:  So stellen Sie Tencent Cloud Server von Grund auf bereit

Artikel empfehlen

Detaillierte Erklärung der Rolle des Schlüssels in React

Inhaltsverzeichnis Frage: Wird die Farbe des Bere...

Einführung in HTML für Frontend-Entwickler

1 Einführung in HTML 1.1 Erste Erfahrungen mit Co...

Uniapps Erfahrung in der Entwicklung kleiner Programme

1. Erstellen Sie ein neues UI-Projekt Zunächst ei...

Implementierung des MySQL Shell import_table-Datenimports

Inhaltsverzeichnis 1. Einführung in import_table ...

Eine detaillierte Einführung in Linux-Dateiberechtigungen

Die Stärke von Linux liegt in seinem Mehrbenutzer...

Detaillierte Erklärung der grep- und egrep-Befehle in Linux

Vertreter / egrep Syntax: grep [-cinvABC] 'wo...

Es ist ganz einfach zu verstehen, was Node.js ist

Inhaltsverzeichnis Offizielle Einführung in Node....

Verwenden von jQuery zum Implementieren des Karusselleffekts

In diesem Artikel finden Sie den spezifischen Cod...

Tutorial zur Installation und Verwendung von Docker MQTT

Einführung in MQTT MQTT (Message Queuing Telemetr...

Heute werde ich einige seltene, aber nützliche JS-Techniken teilen

1. Zurück-Button Verwenden Sie history.back(), um...

Einige Erkenntnisse und Gedanken zu iframe

Diese Geschichte beginnt heute mit einer unerwarte...

Erläuterung des Beispiels für die automatische Anmeldung unter Linux

Es gibt viele Skripte im Internet, die expect ver...

Detaillierte Beispiele zur Ajax-Verwendung in js und jQuery

Inhaltsverzeichnis Natives JS So senden Sie eine ...

CSS-Pseudoklasse: empty makes me shine (Beispielcode)

Jeder, der meine Artikel in letzter Zeit gelesen ...