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
So leiten Sie innerhalb von zwei Sekunden auf andere Seiten einer HTML-Seite um
Code kopieren Der Code lautet wie folgt: <!DOC...
Detaillierte Verwendung des JS-Arrays für jede Instanz
1. forEach() ist ähnlich wie map(). Es wendet ebe...
So fügen Sie Codebeispiele für die Vim-Implementierung in Power Shell hinzu
1. Gehen Sie zur offiziellen Website von Vim, um ...
So gehen Sie mit dem Verlust von Parametern um, wenn Sie die Seite aktualisieren und Parameter an den Vue-Router übergeben
Inhaltsverzeichnis Überblick Methode 1: Parameter...
Kreatives „Über uns“-Webseitendesign
Einzigartige „Über“-Seiten Eine gute Möglichkeit, ...
Beispielcode der Uniapp Vue- und NVUE-Karussellkomponenten
Der Vue-Teil ist wie folgt: <Vorlage> <K...
Lernen Sie die wichtigsten Kenntnisse, die im Vue-Framework beherrscht werden müssen
1. Was ist Vue Vue ist ein fortschrittliches Fram...
Mysql 5.6 fügt eine Methode zum Ändern von Benutzername und Passwort hinzu
Melden Sie sich zuerst bei MySQL an Shell> MyS...
HTML-Formularanwendung beinhaltet die Verwendung von Kontrollkästchen und Optionsfeldern
Einschließlich der Verwendung von Kontrollkästchen...
Schritte zur Einführung von PWA in ein Vue-Projekt
Inhaltsverzeichnis 1. Abhängigkeiten installieren...
Gedanken zu copy_{to, from}_user() im Linux-Kernel
Inhaltsverzeichnis 1. Was ist copy_{to,from}_user...
Vue implementiert Chat-Schnittstelle
In diesem Artikelbeispiel wird der spezifische Co...
Tabellen dynamisch in HTML hinzufügen_PowerNode Java Academy
Ohne weitere Umschweife werde ich den Code direkt...
JS implementiert die Drag- und Platzhalterfunktionen von Elementen
In diesem Blogbeitrag geht es um eine Schwierigke...
Tutorial zum Erstellen eines FTP-Servers in Ubuntu 16.04
Ubuntu 16.04 baut FTP-Server FTP installieren FTP...