Beim Hochladen von Bildern mit Axios in Vue sind Probleme aufgetreten

Was ist FormData?

Nach langem Suchen und Nachforschen habe ich herausgefunden, dass dieses magische Ding ein neues Objekt ist, das zu XMLHttpRequest Level 2 hinzugefügt wurde, das im Februar 2008 vorgeschlagen wurde. Es kann zum Senden von Formularen und zum Simulieren des Sendens von Formularen verwendet werden. Der größte Vorteil besteht natürlich darin, dass es Binärdateien hochladen und den Namen und den Wert aller Formularelemente in einem QueryString kombinieren und im Hintergrund senden kann.

Wichtiger Punkt: Sie können den Namen und den Wert aller Formularelemente in einem QueryString kombinieren und an das Backend übermitteln. Ist das nicht das, was das Backend als Konvertierung des Datenformats bezeichnet? Senden Sie es entsprechend dem Format. Die Trennung von Front- und Backend muss eine asynchrone Übermittlung sein, die dieses Problem sehr gut lösen kann!

Außerdem ist es ganz einfach zu verwenden. Übergeben Sie das Formular einfach als Parameter an den FormData-Konstruktor!

Eine praktische Erfahrung mit der Zusammenarbeit von Vue und Axios

<!--
    *. Die Upload-Komponente in der Vue-Komponente, die ich hier verwende, ist die Vue-Komponente von buefy -->

<Formularmethode="post" enctype="multipart/form-data">
    <b-field class="Datei ist-primär" :class="{'hat-Name': !!Datei}">
        <b-upload v-model="Datei" Klasse="Dateibezeichnung" @input="getModifyAvatar()">
            <span class="file-cta">
                <b-icon Klasse="Datei-Icon" Icon="Hochladen"></b-icon>
                <span class="file-label">Zum Hochladen klicken</span>
            </span>
            <span class="Dateiname" v-if="Datei">
                {{ Dateiname }}
            </span>                    
       </b-upload>
   </b-Feld>
</form>

<Skript>
    Standard exportieren {
        Daten(){
            zurückkehren {
                userInfo: '', // Weisen Sie ihm über eine Get-Anforderungsdatei benutzerbezogene Informationen zu: null,
            }
        },
        Methoden: {
            // Avatar ändern getModifyAvatar(){
                const formData = new FormData();
                //FormData-Daten erstellen formData.append('avatar', this.file)
                // Put-Anfrage übermitteln getModifyInfo(formData).then(res => {
                    diese.Benutzerinfo.avatar = res.data.avatar
                })
            },
        }
    }
</Skript>

// api.js
// Dies ist meine gekapselte globale Anforderungsmethode import { request } from '../network/request'

// Benutzeravatar ändern export const getModifyInfo = (params) => {
    Rückgabeanforderung({
        URL: „ve_register/1/“,
        Methode: 'put',
        Header: { 'Inhaltstyp': 'multipart/form-data' },
        Daten:Parameter
    })
}

Beachten Sie beim Betrachten des obigen Codes, dass Sie beim Senden der Anfrage den Anfrageheader festlegen müssen. Wie oben gezeigt, müssen Sie im HTML-Formular auch enctype="multipart/form-data" festlegen, sonst funktioniert es nicht!

In den obigen Beispielen haben wir nur die append()-Methode von FormData verwendet. Die meisten Artikel über FormData im Internet erwähnen nur die append()-Methode. Welche Methoden hat also das FormData-Objekt? Tatsächlich können wir das ganz einfach mithilfe der Konsole herausfinden:

Nach der Konsole haben wir eine wichtige Entdeckung gemacht. Das FormData-Objekt hat so viele Methoden, dass wir es noch selbst testen müssen, um die Wahrheit herauszufinden. Im Folgenden werden diese Methoden einzeln erklärt:

anhängen()

Mit der Methode append() werden Schlüssel-Wert-Paare zum FormData-Objekt hinzugefügt:

fd.append('Schlüssel1',"Wert1");
fd.append('Schlüssel2',"Wert2");

fd ist ein FormData-Objekt, das ein neu erstelltes leeres Objekt sein kann oder ein Objekt, das bereits ein Formular oder andere Schlüssel-Wert-Paare enthält.

Satz()

Setzen Sie den Wert entsprechend dem/den Schlüsselwert(en).

fd.set('Schlüssel1',"Wert1");
fd.set('Schlüssel2',"Wert2");

Die append()-Methode ist etwas ähnlich. Der Unterschied zwischen den beiden besteht darin, dass die append()-Methode alle neu hinzugefügten Schlüssel-Wert-Paare am Ende hinzufügt, wenn der angegebene Schlüsselwert vorhanden ist, während die set()-Methode die zuvor festgelegten Schlüssel-Wert-Paare überschreibt. Vergleichen wir sie anhand von Beispielen. Wir fügen neue Schlüssel-Wert-Paare basierend auf der vorherigen Form an (append() oder set()):

fd.append('Name',"wird");

Es gibt zwei Schlüssel-Wert-Paare mit dem Schlüsselnamen:

Das Obige ist der Unterschied zwischen append() und set(). Wenn der Schlüsselwert nicht existiert, haben beide die gleiche Wirkung.

löschen()

Erhält einen Parameter, der den Namen des zu löschenden Schlüsselwertes angibt. Wenn mehrere identische Schlüsselwerte vorhanden sind, werden diese gemeinsam gelöscht:

fd.append('Name','wird');
fd.delete('Name');

Die Namensinformationen im Formular und die durch append() hinzugefügten Namensinformationen werden alle gelöscht.

get() und getAll()

Erhält einen Parameter, der den Namen des zu suchenden Schlüssels angibt, und gibt den ersten Wert zurück, der dem Schlüssel entspricht. Bei mehreren identischen Schlüsseln müssen alle zu diesem Schlüssel gehörenden Werte zurückgegeben werden.

Ebenfalls basierend auf dem obigen Formular:

fd.append('Name','wird');
konsole.log(fd.get('name')); // sean

fd.append('Name','wird');
Konsole.log(fd.getAll('name')); // ["sean", "wird"]

hat()

Diese Methode empfängt auch einen Parameter, der gleichzeitig der Name des Schlüssels ist, und gibt einen Booleschen Wert zurück, mit dem bestimmt wird, ob das FormData-Objekt den Schlüssel enthält. Nehmen Sie das obige Formular als Beispiel:

console.log(fd.has('name')); // wahr
console.log(fd.has('Name')); // falsch

Die anderen werde ich nicht vorstellen. Wenn Sie interessiert sind, können Sie sie selbst überprüfen. Schreiben Sie sie einmal, tippen Sie sie einmal ein, das ist praktischer, als jeden Artikel zu lesen!

Wenn der obige Artikel für Sie hilfreich ist, geben Sie unserem Open-Source-Projekt bitte einen Stern: github.crmeb.net/u/xingfu. Vielen Dank!

Oben sind die Einzelheiten der Probleme aufgeführt, die bei Vue mit Axios zum Hochladen von Bildern aufgetreten sind. Weitere Informationen dazu, wie Vue Axios zum Hochladen von Bildern verwendet, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!