Lassen Sie uns über drei Methoden zum Hochladen von Vue-Bildern sprechen

Mit der Entwicklung des Internets ist das Hochladen von Bildern zu einer wichtigen Funktion in der täglichen Entwicklung geworden. In der Vue-Entwicklung haben wir auch viele Möglichkeiten, das Hochladen von Bildern zu implementieren, z. B. die Verwendung von Plug-Ins von Drittanbietern, natives Ajax und die Verwendung von FileReader von HTML5. In diesem Artikel werden diese drei Möglichkeiten zum Hochladen von Bildern und ihre jeweiligen Vor- und Nachteile vorgestellt. Ich hoffe, dass er für Sie hilfreich ist.

1. Verwenden Sie Plug-Ins von Drittanbietern. Bei der Vue-Entwicklung können wir einige weit verbreitete Plug-Ins von Drittanbietern zum Hochladen von Bildern verwenden, z. B. Vue-Upload, Vue-Core-Image-Upload usw. Diese Plug-ins wurden von vielen Menschen verwendet und getestet, können unseren Entwicklungsprozess effektiv beschleunigen und können schnell in unsere Projekte integriert werden. Hier nehmen wir Vue-Upload als Beispiel, um die Verwendung zu erklären.

Der erste Schritt besteht darin, das Plug-In zu installieren. Geben Sie in der Befehlszeile Folgendes ein:

npm install vue-upload

Der zweite Schritt besteht darin, das Plug-In einzuführen und Vue-Upload in die Komponente einzuführen, die verwendet werden muss:

import VueUpload from 'vue-upload'

The Der dritte Schritt besteht darin, es in der Komponente zu verwenden. Wir verwenden eine Schaltfläche als Auslöser, um Bilder auszuwählen, und verwenden dann die Vue-Upload-Funktion, um Bilder hochzuladen:

<button @click="upload()">选择文件</button>
<VueUpload ref="upload"
           :post-action="&#39;url&#39;"
           :headers="headers"
           :name="&#39;file&#39;"
           @input="onUpload"></VueUpload>

Unter diesen sind die Post-Action die Upload-Adresse und die Header Anforderungsheader und Name ist der Dateifeldname. Die onUpload-Methode ist die Methode, die nach Abschluss des Uploads aufgerufen wird.

Der Vorteil von Vue-Upload ist, dass es schnell und bequem ist, aber der Nachteil liegt auch auf der Hand, nämlich dass wir die Upload-Funktion nicht vollständig anpassen können.

2. Natives Ajax

Vue unterstützt auch native Ajax-Anfragen zum Abschließen von Bild-Uploads. Wir können ein Eingabefeld in der Komponente implementieren und dann Ajax verwenden, um die in der Eingabe ausgewählte Datei auf den Server hochzuladen. Bei dieser Methode müssen wir den gesamten Upload-Prozess selbst implementieren, einschließlich Upload-Fortschritt, Ausnahmebehandlung usw., aber wir können die Upload-Funktion frei anpassen und werden nicht durch Plug-Ins von Drittanbietern eingeschränkt.

Der erste Schritt besteht darin, der Vorlage ein Eingabefeld hinzuzufügen:

<input ref="file" type="file" @change="upload()">

Der zweite Schritt besteht darin, die Upload-Logik in Vues Methoden zu implementieren:

upload: function () {
  const fileInput = this.$refs.file;
  const file = fileInput.files[0]
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: e => {
      // 上传进度的处理逻辑
    }
  }).then(res => {
    // 上传成功的处理逻辑
  }).catch(err => {
    // 异常处理逻辑
  })
}

Dieser Code verwendet Axios, um Ajax-Anfragen zu senden. Wir können es selbst tun. Wählen Sie einen anderen Netzwerkanforderungsbibliothek. onUploadProcess ist die Rückruffunktion des Upload-Fortschritts, in der wir die Verarbeitungslogik des Upload-Fortschritts implementieren können.

3. Nutzen Sie den FileReader von HTML5

Der FileReader von HTML5 bietet eine neue Möglichkeit, Dateien auf dem lokalen Gerät des Benutzers zu lesen, und wir können ihn zum Abschließen von Bild-Uploads verwenden. Diese Methode kann die Standardübermittlung und den Seitensprung des Browsers vermeiden und lässt sich benutzerfreundlicher mit der Komponentenentwicklungsmethode von Vue kombinieren.

Der erste Schritt besteht darin, eine Bildvariable und ein FileReader-Objekt in den Daten der Komponente zu definieren:

data: function () {
  const fileReader = new FileReader();
  fileReader.onload = () => {
    this.image = fileReader.result;
  };
  
  return {
    image: null,
    fileReader: fileReader
  };
}

Der zweite Schritt besteht darin, die Logik des Lesens und Hochladens von Dateien in den Methoden der Komponente zu implementieren:

upload: function () {
  const fileInput = this.$refs.file;
  const file = fileInput.files[0]
  this.fileReader.readAsDataURL(file);
},
submit: function () {
  const image = this.image;
  axios.post('/upload', {image: image})
    .then(res => {
      // 上传成功的处理逻辑
    }).catch(err => {
      // 异常处理逻辑
    })
}

Hier lesen wir das Bild. Zum Schluss , wird es in einer Bildvariablen gespeichert und dann wird das Bild an den Server übermittelt. Der Vorteil dieser Methode besteht darin, dass sie über eine benutzerfreundliche Oberfläche und eine klare Bildverarbeitungslogik verfügt. Der Nachteil besteht darin, dass die Anzeige des Upload-Fortschritts nicht unterstützt wird.

Zusammenfassung

In diesem Artikel werden drei Methoden zum Implementieren des Hochladens von Bildern in Vue vorgestellt. Sie verwenden Plug-Ins von Drittanbietern, natives Ajax und FileReader mit HTML5. Jede Methode hat ihre Vor- und Nachteile, und Entwickler können die geeignete Methode basierend auf den tatsächlichen Anforderungen des Projekts auswählen. Das Hochladen von Bildern ist eine gängige Funktion, und die Beherrschung dieser Upload-Methoden gehört auch zu den wesentlichen Fähigkeiten für Vue-Entwickler.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über drei Methoden zum Hochladen von Vue-Bildern sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!