Vue+axios-Beispielcode zum Hochladen von Bildern und Erkennen von Gesichtern

In diesem Artikel wird hauptsächlich der Beispielcode von vue+axios zur Realisierung der Gesichtserkennung durch das Hochladen von Bildern vorgestellt und wie folgt mit Ihnen geteilt:

Schauen wir uns zunächst den Endeffekt an:

Hier kommt die Datei-Upload-Komponente von Vant zum Einsatz. Das Backend erkennt das Gesicht im hochgeladenen Bild, gibt es an das Frontend zurück und erhält die zum Gesicht passende Arbeits- oder Matrikelnummer. Dadurch können später auch andere Systeme darauf zurückgreifen. Wenn beispielsweise ein Gesichtsfoto erfolgreich hochgeladen und erkannt wurde, kann der Konferenzraumzugang per Gesicht geöffnet werden. Derzeit haben wir nur den Effekt des Hochladens des Gesichts einer Person umgesetzt.

Axios-Anfrage

Wenn Sie Axios verwenden, um Daten mit der Methode „post“ anzufordern, ist der Standardparameterdatentyp „String“. Wenn Sie im JSON-Format übergeben müssen, müssen Sie qs.js einführen, abhängig vom vom Backend akzeptierten Typ.

Qs-Verarbeitungsdatenanalyse

Zunächst einmal ist qs ein vom npm-Repository verwaltetes Paket und kann über den Befehl npm install qs installiert werden.
Adresse: www.npmjs.com/package/qs

qs.parse(), qs.stringify()

• qs.parse() analysiert die URL in ein Objekt
• qs.stringify() serialisiert das Objekt in die Form einer URL und verkettet es mit &

Im Folgenden wird beschrieben, wie es in tatsächlichen Projekten verwendet wird:

 var Daten = {
    Code:GetRequest().code,
    Datei:Datei.Inhalt
}
axios({
   Methode: 'post',
   URL: „/app/face/upload“,
  Daten: qs.stringify(Daten)
})

Vant-Upload-Dateiformat

Beim Hochladen von Dateien müssen wir auf das Format achten, das für die Übergabe an das Backend erforderlich ist. Dies kann entweder File Stream oder Base64 sein. Obwohl vant bereits beide Typen für uns verarbeitet hat, möchten wir formData auch verwenden, um den File Stream direkt an das Backend zu übergeben. Einige Backends müssen Base64 selbst verarbeiten und herausfiltern. Hier müssen wir die reguläre fileList[0].content.replace(/^data:image\/\w+;base64,/, '') verwenden und sie dann an das Backend übergeben.

Vollständiger Code

    <div id="app">
        <div Stil="Anzeige:flex;    
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
        Breite: 100vw;
        Höhe: 100vh;">
            <div>
              <van-uploader v-model="fileList" upload-text='Gesichtsfoto von vorne' :max-count="1" :after-read="afterRead" ></van-uploader>
              <p style="text-align:center;font-size:15px;" v-if="data">Studentenausweis/Arbeitsausweis: {{data}}</p>
            </div>
          </div>
      </div>
 
  <Skript>
   var app = new Vue({
    el: '#app',
    Daten: {
      Dateiliste: [],
      Daten:'',
    },
    Methoden:{
      nachLesen(Datei) {
      // Hochladen, füge den Status der Eingabeaufforderung zum Hochladen hinzu
        file.status = "Hochladen";
        file.message = 'Hochladen...';
        var Daten = {
            Code:dies.$route.query.code,
            Datei:Datei.Inhalt
          }
        axios({
          Methode: 'post',
          URL: „App/Gesicht/Hochladen“,
          Daten:{
            Code:GetRequest().code,
            Datei:Datei.Inhalt
          }
        }).dann((res)=>{
        //Die Anfrage wird zurückgegeben und der Erfolgsstatus wurde abgerufen. Setzen Sie den Upload-Erfolgsaufforderungsstatus auf „Fertig“
          wenn(res.data.code == 0){
            Datei.status = "erledigt";
            Datei.Nachricht = '';
            diese.Daten = res.Daten.Daten.BenutzerNr
            this.$notify({ Typ: 'success', Nachricht: 'Upload erfolgreich' });
            
          // Die Anforderung wird zurückgegeben und es wird die Meldung angezeigt, dass der Upload fehlgeschlagen ist und der Status „Fehlgeschlagen“ lautet.
          }anders{
            Datei.status = "fehlgeschlagen";
            file.message = „Hochladen fehlgeschlagen“;
           this.$notify({ Typ: 'Warnung', Nachricht: res.data.msg });
           diese.Daten = ''
          }
        }).fangen(()=>{
          Datei.status = "fehlgeschlagen";
          file.message = „Hochladen fehlgeschlagen“;
          diese.Daten = ''
        })
      },
    }
  })
  </Skript>

Damit ist dieser Artikel über den Beispielcode zur Implementierung des Bild-Uploads und der Gesichtserkennung mit vue+axios abgeschlossen. Weitere verwandte Inhalte zum Bild-Upload und zur Gesichtserkennung mit vue axios finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!