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:&#39;linear-gradient(to right,#C0C7CB 0%,#C0C7CB &#39;+progress+&#39;,#E1E6E9 &#39;+progress+&#39;,#E1E6E9 100%)&#39;}">

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!