Heim >Web-Frontend >js-Tutorial >Verwenden Sie Axios, um Dateien in Vue hochzuladen
Ich habe Axios kürzlich gelernt und es dann im Projekt verwendet. Daher stellt Ihnen dieser Artikel hauptsächlich die relevanten Informationen zur Verwendung von Axios in Vue vor, um eine Echtzeitaktualisierung des Datei-Upload-Fortschritts zu erreichen Einführung in Axios und seine Methoden. Jeder versteht das Lernen. Freunde, die es brauchen, können unten gemeinsam lernen.
Axios-Einführung
Axios ist ein Promise-basierter HTTP-Client für Browser und Nodejs. Er weist die folgenden Eigenschaften auf:
XMLHttpRequest über den Browser erstellen
HTTP-Anfrage von node.js erstellen
Support Promise API
Abfangen von Anfragen und Antworten
Anfrage- und Antwortdaten konvertieren
Anfrage abbrechen
JSON-Daten automatisch konvertieren
Der Client unterstützt die Verhinderung von CSRF/XSRF
Einführungsmethode:
$ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Wenn Sie andere Plug-Ins installieren, können Sie diese direkt in main.js einführen und Vue.use() zum Registrieren verwenden. Axios ist jedoch kein Vue-Plug-In, daher können Sie Vue.use()
nicht verwenden , also einfach Kann sofort in jede Komponente eingeführt werden, die eine Anfrage senden muss.
Um dieses Problem zu lösen, haben wir nach der Einführung von Axios die Prototypenkette geändert, um sie benutzerfreundlicher zu machen.
//main.js
import axios from 'axios' Vue.prototype.$http = axios
Nachdem Sie diese beiden Codezeilen zu main.js hinzugefügt haben, können Sie den Befehl $http direkt in den Methoden der Komponente verwenden
methods: { postData () { this.$http({ method: 'post', url: '/user', data: { name: 'xiaoming', info: '12' } }) }
Für Weitere Grundkenntnisse finden Sie in diesem Artikel: //www.jb51.net/article/110324.htm
vue verwendet Axios, um Echtzeitaktualisierungen des Datei-Upload-Fortschritts zu implementieren
Das Fortschrittsereignis wurde zu XHR Level 2 hinzugefügt, wodurch wir einen Echtzeit-Datenfortschrittsbalken hinzufügen können, während der Browser neue Daten empfängt, wodurch die Interaktion benutzerfreundlicher wird
vue-Vorlage
<p class="progress" @click="upload" :style="{backgroundImage:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB '+progress+',#E1E6E9 '+progress+',#E1E6E9 100%)'}">
vue-js
var form = new FormData() form.append('file', vm.$refs.upload.files[0]) form.append('id', id) form.append('type', type) var config = { onUploadProgress: progressEvent => { var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%' this.progress = complete } } axios.post(`api/uploadFile`, form, config).then((res) => { if (res.data.status === 'success') { console.log('上传成功') } })
Das Obige habe ich für alle zusammengestellt und hoffe, dass es hilfreich sein wird alle in der Zukunft.
Verwandte Artikel:
Gibt es einen Fehler beim Aufruf von fs.renameSync in Node.js?
So konfigurieren Sie die React Native-Entwicklungsumgebung in VSCode
So installieren Sie Mint-UI in Vue
So implementieren Sie die Anzeige der Sammlungsdatendurchquerung in AngularJS
Das obige ist der detaillierte Inhalt vonVerwenden Sie Axios, um Dateien in Vue hochzuladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!