Vue+thinkphp5.1+axios zum Realisieren des Datei-Uploads

In diesem Artikel erfahren Sie, wie Sie mit thinkphp5.1 + Vue+axios Dateien zu Ihrer Referenz hochladen. Der spezifische Inhalt ist wie folgt

Vorwort

Verwenden Sie thinkphp5.1 + Vue+axios+ zum Hochladen von Dateien

1. Seitencode

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8">
    <title>Demo hochladen</title>
    <Stil>
        .fileBtn{
            Breite: 180px;
            Höhe: 36px;
            Zeilenhöhe: 36px;
            Hintergrund: himmelblau;
            Rahmenradius: 5px;
            Anzeige: Block;
            Textausrichtung: zentriert;
            Farbe: weiß;
        }
        [v-Umhang] {
            Anzeige: keine;
        }
    </Stil>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</Kopf>
<Text>
<div id="app">
    <h1 v-cloak>{{message}}</h1>
    <form>
        <input type="file" name="file" ref="file" id="file" v-on:change="upload" style="visibility: hidden;" />
        <label for="file" class="fileBtn">Hochladen</label>
    </form>
</div>

</body>
</html>

<Skript>
    var vue = neuer Vue({
        el:'#app',
        Daten:{
            Nachricht: 'Datei hochladen',
        },
        Methoden:{
            hochladen:Funktion(Datei) {
                console.log(Datei.Ziel.Dateien[0]);
                var forms = neue Formulardaten()
                var Konfigurationen = {
                    Header: {'Inhaltstyp': 'multipart/form-data; charse=UTF-8'}
                };
                forms.append('Datei',Datei.Ziel.Dateien[0]);
                axios.post('http://127.0.0.1/index/index/upload', Formulare, Konfigurationen)
                    .then(Funktion (Antwort) {
                        wenn (Antwort.Daten.Code == 0) {
                            alert('Datei erfolgreich hochgeladen');
                        } anders {
                            alert('Dateiupload fehlgeschlagen');
                        }
                        Datei.Ziel.Wert = '';

                    })
                    .catch(Funktion (Fehler) {
                        konsole.log(Fehler);
                    });
            }
        }
    });

</Skript>

2. Lösen Sie das Problem der domänenübergreifenden Schnittstelle

Hier wird Apache 2.4.8 verwendet. Suchen Sie httpd.conf und fügen Sie eine Konfigurationszeile hinzu:

Header-Satz Access-Control-Allow-Origin *

3. Backend-Verarbeitung des Upload-Teils

/**
     * Überprüfung der Methode zum Hochladen von Dateien*/
    öffentliche Funktion upload()
    {
        versuchen{
            $Datei = Anfrage()->Datei('Datei');

            wenn (leer($datei)) {
                echo json_encode(['code' => 1,"msg" => 'Bitte wählen Sie die Upload-Datei aus'],JSON_UNESCAPED_UNICODE);exit;
            }
            // Wechseln Sie zum Stammverzeichnis der Framework-Anwendung /uploads/ Verzeichnis $info = $file->move( '../uploads');
            wenn($info){
                // Nach erfolgreichem Upload die Upload-Informationen abrufen // JPG ausgeben
                echo json_encode(['code' => 0,"msg" => 'erfolgreich'],JSON_UNESCAPED_UNICODE);Beenden;
            }anders{
                // Beim Hochladen konnten keine Fehlerinformationen abgerufen werden. echo json_encode(['code' => 1,"msg" => 'error'],JSON_UNESCAPED_UNICODE);exit;
            }
        } Fang (Ausnahme $e) {
            echo json_encode(['code' => 1,"msg" => 'Fehler'],JSON_UNESCAPED_UNICODE);Beenden;
        }
}

4. Tatsächliche Wirkung

Test erfolgreich!

Klicken Sie zum Lernen des Lern-Tutorials zu vue.js bitte auf die Spezialthemen Lern-Tutorial zu vue.js-Komponenten und Lern-Tutorial zu Vue.js-Front-End-Komponenten.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

PHP-Sicherheitsangriff und -Abwehr durch detaillierte Nutzung von Dateiupload-Schwachstellen und Bypass-Techniken
PHP-Fallstudie zum Ändern der Konfiguration der Uploadgröße der php.ini-Datei
PHP-Datei-Upload zu OSS und Löschen von Remote-Alibaba-Cloud-OSS-Dateien
Analyse der Sicherheitslücke bei willkürlichem Dateiupload in phpcmsv9.0
Detaillierte Erklärung des Problems beim Hochladen von Base64-codierten Dateien in PHP
PHP implementiert Datei-Upload und -Download
PHP-Fallanalyse und Lösung, wenn keine Datei hochgeladen wird

<<: So kompilieren und installieren Sie PHP und Nginx in einer Ubuntu-Umgebung

>>: MySQL 8.0.12 Einfaches Installations-Tutorial

Implementierungscode für die adaptive IFrame-Größe

CSS3-Animation: Das Bild wird allmählich größer, wenn sich die Maus darauf befindet, und allmählich kleiner, wenn die Maus es verlässt

Artikel

Detaillierte Erklärung, wie Vue-Komponenten Werte untereinander übertragen

Artikel

mysql löst zeitzonenbezogene Probleme

Artikel

Vue+thinkphp5.1+axios zum Realisieren des Datei-Uploads

Vorwort

Implementierungscode für die adaptive IFrame-Größe

Wann sollte man Map anstelle einfacher JS-Objekte verwenden?

Der gesamte Prozess der Installation von Gogs mit Pagoda Panel und Docker

Das WeChat-Applet implementiert das Schlangenspiel

So verwenden Sie weniger im WeChat-Applet (optimale Methode)

Der HTML-Seitenkopfcode ist völlig klar

Nginx verbessert die Zugriffsgeschwindigkeit basierend auf der GZIP-Komprimierung

CSS3-Animation: Das Bild wird allmählich größer, wenn sich die Maus darauf befindet, und allmählich kleiner, wenn die Maus es verlässt

Detaillierte Erklärung, wie Vue-Komponenten Werte untereinander übertragen

mysql löst zeitzonenbezogene Probleme

Artikel empfehlen

Detaillierte Erläuterung der default_server-Definition und der entsprechenden Regeln von nginx

Beispielanalyse des asynchronen Verhaltens von Popup-Fenstern auf Front-End-Webseiten von Vue.js

So verwenden Sie die Wurmreplikation in einer MySQL-Datentabelle

Schritte zum Öffnen des MySQL-Binlogs

Detaillierte Erläuterung der ECharts-Mausereignisverarbeitungsmethode

Installationsmethode der dekomprimierten Version von MySQL 5.7.18 unter Win7x64

Vorbereitung der Vue Element-Front-End-Anwendungsentwicklung für die Entwicklungsumgebung

JavaScript zum Erzielen eines Lupeneffekts

Detaillierte Erläuterung der Verwendung des Linux-Zeitbefehls

Vertieftes Verständnis davon in JavaScript

Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist

js, um einen einfachen Front-End-Paging-Effekt zu erzielen

Nginx löst Cross-Domain-Probleme und bindet Seiten von Drittanbietern ein

So installieren Sie Docker auf Ubuntu20.04 LTS

Bootstrap realisiert den Karusselleffekt