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
Eine Sammlung möglicher Probleme bei der Migration von SQLite3 nach MySQL
Kurzbeschreibung Passend für Leser: Mobile Entwic...
So entfernen Sie die Trennlinie einer Webseitentabelle
<br />So entfernen Sie die Trennlinien einer...
Mysql-Abfrageanweisung mit mehreren Bedingungen und dem Schlüsselwort „And“
MySQL-Abfrage mit mehreren Bedingungen und dem Sc...
Nach dem Docker-Lauf ist der Status immer „Beendet“
füge -it hinzu docker run -it -name test -d nginx...
HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten
Heute werden wir einen einfachen Herzschlageffekt...
Docker führt Vorgänge mit dem angegebenen Speicher aus
wie folgt: -m, --memory Speicherlimit, das Format...
Auch Webdesigner müssen Web-Coding lernen
Oftmals wird nach der Fertigstellung eines Webdes...
Informationen zu benutzerdefinierten Überwachungselementen und Triggern von Zabbix
Inhaltsverzeichnis 1. Überwachungsport Beziehungs...
Die spezifische Verwendung und der Unterschied zwischen Attribut und Eigenschaft in Vue
Inhaltsverzeichnis Als Attribut- und Eigenschafts...
So installieren Sie MySQL über SSH auf einem CentOS VPS
Geben Sie yum install mysql-server Drücken Sie Y,...
So gehen Sie mit der Meldung „Vorgang nicht zulässig“ beim Löschen von Dateien in Linux um
Kollegen fragen oft, ob beim Löschen von Dateien/...
Beispiel einer Methode zur Fehlerbehebung beim Lösen von Nginx-Portkonflikten
Problembeschreibung Ein Spring + Angular-Projekt ...
Erläuterung der HTTPS-Prinzipien
Da die Kosten für die Erstellung von HTTPS-Websit...
CocosCreator ScrollView-Optimierungsreihe: Frame-Laden
Inhaltsverzeichnis 1. Einleitung 2. Analyse des f...
Detailliertes Tutorial zur Installation von Docker und Nvidia-Docker unter Ubuntu 16.04
Inhaltsverzeichnis Docker-Installation Nvidia-Doc...