Analysieren Sie das Problem der Übertragung von Dateien und anderen Parametern in der Upload-Komponente von Element-UI

Vor kurzem habe ich in meinem Projekt vuethink verwendet, das Element-UI integriert hat. Ich hatte zuvor das Bootstrap-Framework verwendet und hatte nur vage Kenntnisse von js. Ich habe auch vue.js verwendet, aber ich habe es nicht gründlich gelernt und bin dann in verschiedene Fallen getappt.

Lassen Sie mich die Probleme analysieren, die bei der Verwendung von Element-UI aufgetreten sind, und ihre Lösungen. Bitte korrigieren Sie mich, wenn es Mängel gibt.

Zunächst gibt es auf der offiziellen Website von Element-UI eine kurze Einführung in die Upload-Komponente.

<el-hochladen
   Klasse="Upload-Demo"
   Aktion="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handleVorschau"
   :on-remove="handleEntfernen"
   :file-list="Dateiliste">
   <el-button size="small" type="primary">Zum Hochladen klicken</el-button>
   <div slot="tip" class="el-upload__tip">Es können nur JPG-/PNG-Dateien hochgeladen werden und die Größe sollte 500 KB nicht überschreiten</div>
</el-upload> 

Tatsächlich dient der Upload dazu, den Eingabetyp „file“ mit mehreren Stilebenen zu kapseln.

1. Aktions-URL

Das erste, was ich nicht verstehe, ist die URL in der Aktion. Ich verwende PHP im Hintergrund. Nach meinem späteren Verständnis ist diese URL tatsächlich die von PHP verwendete Upload-Funktion, genau wie die Aktion im Formular. Der Unterschied besteht darin, dass ich lange gesucht habe und nicht herausfinden kann, ob ich die Standardmethode für die Übermittlung von Posts ändern kann.

Übergeben Sie beim Empfangen der zweiten Datei andere Parameter

Lösung 1: URL-Parameterübergabe

Der direkteste Weg, Parameter an die von PHP bereitgestellte URL zu übergeben, besteht darin, die Post-Methode in der Aktion zu verwenden. Die Restful-URL, die ich im PHP-Backend verwende, kann jedoch keine Parameter über die Post-Methode übergeben. Ich habe mehrere Methoden ausprobiert, aber es hat nicht geklappt, und ich weiß nicht, wie ich sie in die Get-Methode ändern kann.

Die erste Option kann nur aufgegeben werden

Lösung 2: Aktion nicht verwenden

Aktion aufgeben. Nachdem ich viele Informationen gesucht hatte, fand ich heraus, dass ich anstelle von Aktion das Attribut „before-upload“ verwenden kann. Dies ist ein Attribut vom Funktionstyp. Der Standardparameter ist die aktuelle Datei. Solange diese Datei übergeben werden kann, kann der Effekt erzielt werden.

Um diese Methode zu bestehen, müssen Sie ein neues Formdata-Objekt erstellen und dann Schlüssel und Wert an dieses Objekt anhängen, ähnlich dem Postman-Test.

Die konkreten Beispiele, die einige Leute im Internet anführen, lauten ungefähr wie folgt

vorUpload (Datei) {
      let fd = neue FormData()
      fd.append('Schlüssel', Datei, Dateiname)
      axios.post(url, fd.
        //Führen Sie einige Operationen aus})
      return false // false bedeutet kein automatischer Upload. Ich habe es später versucht und festgestellt, dass sie alle gleich waren, kein automatischer Upload},

Das scheint eine gute Idee zu sein, also habe ich es aufgeschrieben.

vorHochladen (Datei,ID) {
      let fd = neue FormData()
      fd.append('Schlüssel', Datei, Dateiname)
      axios.post(url, fd.
        Daten:{
         Ich würde: Ich würde
        }
      })
      return false // false bedeutet kein automatischer Upload. Ich habe es später versucht und festgestellt, dass sie alle gleich waren, kein automatischer Upload},

Dann stellte ich fest, dass ich, egal was ich tat, immer nur die ID übergeben konnte. Im PHP-Code war dump(_FLIES) immer NULL. Das war sehr ärgerlich. Ich suchte lange, konnte aber keine Lösung finden. Dann stellte ich fest, dass der von mir verwendete Inhaltstyp multipart/form-data sein sollte, aber die Debugging-Seite in f12 war application/json; charset=utf-8. Ich dachte, es könnte dieses Problem sein, also fügte ich dem Code Header hinzu.

vorHochladen (Datei,ID) {
        let fd = neue FormData()
        fd.append('Schlüssel', Datei, Dateiname)
        axios.post(url, fd.
          Daten:{
           Ich würde: Ich würde
          },
          Überschriften: {
           „Inhaltstyp“: „multipart/Formulardaten“
          }
        })
        return false // false bedeutet kein automatischer Upload. Ich habe es später versucht und festgestellt, dass sie alle gleich waren, kein automatischer Upload},

Der diesmal gemeldete Fehler lautet: Axios Fehlende Grenze in Multipart/Formulardaten. Es gibt keine Grenze. Das ist sehr ärgerlich.

Später habe ich festgestellt, dass der Inhaltstyp automatisch erkannt und dann mit Grenzen versehen wird. Einige Leute sagten auch, dass der Inhaltstyp als undefiniert definiert werden sollte, aber das funktioniert immer noch nicht. Der Inhaltstyp wird nur automatisch erkannt.

Später stellte ich fest, dass Formdaten und Daten nicht zusammen übergeben werden können. Wenn Formdaten übergeben werden sollen, können Daten nicht übergeben werden. Daher sollte es geändert werden in

vorHochladen (Datei,ID) {
    let fd = neue FormData()
    fd.append('Datei', Datei)
    fd.append('id',id)
    axios.post(url, fd, {

    })
    return false // false bedeutet kein automatischer Upload. Ich habe es später versucht und festgestellt, dass sie alle gleich waren, kein automatischer Upload},

Das ist es.

Folgendes ist mein Code

<el-upload Klasse="Upload-Demo"
            ziehen
            Aktion="123"
            :before-upload="vor dem Hochladen"
            mehrere
            ref="neuer Upload"
            :auto-upload="false"
            akzeptieren=".mp4,.flv,.mov"
            :on-change="neuerHandleChange"
            :on-success="neuerHandlesuccess">
            <i Klasse="el-icon-upload"></i>
            <div class="el-upload__text">Ziehen Sie Dateien hierher oder <em>klicken Sie zum Hochladen</em> </div>
            <div class="el-upload__tip" slot="tip">Bitte beachten Sie, dass Sie nur Videodateien in den Formaten .mp4 .flv .mov hochladen können</div>
          </el-upload>
          el-button Typ="primär" @click="newSubmitForm()" Klasse="yes-btn">
            OK</el-button>
          <el-button @click="resetForm('neuesFormular')">
            Zurücksetzen</el-button>

vorUpload (Datei) {
      console.log(Datei)
      let fd = neue FormData()
      fd.append('Datei', Datei)
      fd.append('Gruppen-ID', diese.Gruppen-ID)
      // konsole.log(fd)
      neuesVideo(fd).then(res => {
        Konsole.log(res)
      })
      returniere wahr
    },

neuesSubmitForm () {
       dies.$refs.newupload.submit()
    },

Exportfunktion newVideo (Daten) {
  returniere Axios({
    Methode: 'post',
    URL: „http://localhost:8086/Platform1-back-end/public/admin/VideoBase/newVideo“,
    Zeitüberschreitung: 20000,
    Daten: Daten
  })
}

Ich habe Axios in eine Datei gepackt und sie von der Vue-Datei getrennt. Sie sind fast gleich.

Wenn Sie der Aktion etwas hinzufügen, wird außerdem ein 404-Fehler angezeigt, der jedoch keinen Einfluss auf den endgültigen Effekt hat. Wenn es Ihnen etwas ausmacht, können Sie prüfen, ob es eine Möglichkeit gibt, den Fehler zu entfernen.

Das Schema überträgt Werte mehrfach in drei Schritten

Ich habe Option 2 nicht ausprobiert, da sie erfolgreich war, aber sie ist sinnlos und unpraktisch.

Dies ist das Ende dieses Artikels zum Übergeben von Dateien und anderen Parametern in der Upload-Komponente in Element-UI. Weitere relevante Inhalte zur Upload-Komponente in Element-UI finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!