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 VorwortVerwenden 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:
|
<<: So kompilieren und installieren Sie PHP und Nginx in einer Ubuntu-Umgebung
>>: MySQL 8.0.12 Einfaches Installations-Tutorial
Artikel empfehlen
Javascript, um den Effekt des Schließens von Anzeigen zu erzielen
Hier ist eine Fallstudie zu Ihrer Information, wi...
Detaillierte Erläuterung der MySQL-Datenbank mit zig Millionen Datenabfragen und -speicherungen
Inhaltsverzeichnis Datenverarbeitungslösung auf M...
Zusammenfassung der Wissenspunkte zum Linux-Datumsbefehl
Verwendung: Datum [Optionen]... [+Format] oder: D...
Perfektes Installationstutorial für das Dualsystem Win10 + Ubuntu 16.04 [detailliert]
Denken Sie unbedingt daran, Ihre Daten zu sichern...
Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger
Ich habe vor kurzem HTML neu gelernt, was als neue...
MySQL-Trigger: ausführliche Erklärung und einfaches Beispiel
Einfaches Beispiel für einen MySQL-Trigger Gramma...
Installieren Sie Zookeeper unter Docker (Standalone und Cluster).
Nachdem wir Docker gestartet haben, schauen wir u...
Implementierung eines laufenden Springboot-Projekts mit Docker
Einführung: Die Konfiguration von Docker, auf dem...
MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse
Inhaltsverzeichnis 1. Einleitung 1.1 Grundsatz 1....
Detaillierte Erklärung zur Installation von PHP7 unter Linux
Wie installiere ich PHP7 unter Linux? 1. Installi...
Lösung für das automatische Trennen der Verbindung von Navicat zur Datenbank nach einer gewissen Zeit
Dies liegt daran, dass der Datenbankserver so ein...
Der gesamte Prozess der Installation von mysql5.7.22 unter der ARM64-Architektur
MySQL-Download-Adresse: https://obs.cn-north-4.my...
CSS sorgt dafür, dass der untergeordnete Container das übergeordnete Element übersteigt (der untergeordnete Container schwebt im übergeordneten Container).
Vorwort Manchmal benötigen wir eine Floating-Effe...
Natives JavaScript zum Erzielen von Folieneffekten
Wenn wir eine Seite erstellen, insbesondere eine ...
Detaillierte Erläuterung der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten in Vue3
Inhaltsverzeichnis Erste Methode App.vue Startsei...