So lösen Sie das Problem der Fortschrittsanzeige beim Hochladen mehrerer Bilder in der Vue-Entwicklung-PHP-Tutorial-php.cn

So lösen Sie das Problem der Fortschrittsanzeige beim Hochladen mehrerer Bilder in der Vue-Entwicklung

王林

Freigeben： 2023-06-29 13:58:02

Original

1216 Leute haben es durchsucht

So lösen Sie das Problem der Fortschrittsanzeige beim Hochladen mehrerer Bilder in der Vue-Entwicklung

Mit der rasanten Entwicklung des Internets ist das Hochladen von Bildern zu einem der häufigsten Vorgänge in unserer täglichen Entwicklung geworden. Wenn Benutzer mehrere Bilder hochladen müssen, müssen sie häufig den Upload-Fortschritt anzeigen, damit Benutzer den Status und Fortschritt des Uploads klar verstehen können. Für Vue-Entwickler ist die Lösung des Problems der Fortschrittsanzeige beim Hochladen mehrerer Bilder zu einer wichtigen technischen Überlegung geworden.

In diesem Artikel wird eine Lösung vorgestellt, um den Fortschritt des Hochladens von Bildern mithilfe von Vue-Komponenten und Axios-Bibliotheken anzuzeigen.

Zuerst müssen wir eine Vue-Komponente erstellen, um die Bild-Upload-Funktion zu implementieren. Das Folgende ist eine einfache Beispielkomponente:

<template>
  <div>
    <input type="file" multiple @change="uploadImages" />
    <ul>
      <li v-for="(image, index) in uploadedImages" :key="index">
        {{ image.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      uploadedImages: [],
    };
  },
  methods: {
    async uploadImages(event) {
      const files = event.target.files;

      for (let i = 0; i < files.length; i++) {
        const formData = new FormData();
        formData.append('image', files[i]);

        const config = {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          onUploadProgress: (progressEvent) => {
            const percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            console.log(percentCompleted);
          },
        };

        try {
          const response = await axios.post('/upload', formData, config);
          this.uploadedImages.push(response.data);
        } catch (error) {
          console.log(error);
        }
      }
    },
  },
};
</script>

Nach dem Login kopieren

Im obigen Code haben wir eine einfache Bild-Upload-Komponente eingerichtet. In der Komponente werden mehrere vom Benutzer ausgewählte Bilddateien durch Abhören des change-Ereignisses des Eingabeelements abgerufen. Anschließend erstellen wir mit FormData ein Formular und hängen die ausgewählte Bilddatei an das Formular an. change事件，获取到用户选择的多个图片文件。然后，我们使用FormData来创建一个表单，并将选择的图片文件附加到表单中。

接下来，我们使用axios库来发送POST请求，将图片上传到服务器。在axios请求的配置中，我们使用了onUploadProgress回调函数来获取上传进度。在回调函数中，我们可以通过对已上传字节数和总字节数的计算，得到上传的进度百分比，并通过控制台打印出来。

最后，我们将服务器返回的上传成功的图片信息存储到组件的uploadedImages

Als nächstes verwenden wir die Axios-Bibliothek, um eine POST-Anfrage zu senden, um das Bild auf den Server hochzuladen. In der Konfiguration der Axios-Anfrage verwenden wir die Rückruffunktion onUploadProgress, um den Upload-Fortschritt zu erhalten. In der Rückruffunktion können wir den Prozentsatz des Upload-Fortschritts ermitteln, indem wir die Anzahl der hochgeladenen Bytes und die Gesamtzahl der Bytes berechnen, und ihn über die Konsole ausdrucken.

Schließlich speichern wir die vom Server zurückgegebenen erfolgreich hochgeladenen Bildinformationen im Array uploadedImages der Komponente und zeigen sie auf der Seite an.

Wenn der Benutzer mehrere Bilder zum Hochladen auswählt, wird jedes Mal, wenn ein Bild hochgeladen wird, die Ausführung der Fortschrittsrückruffunktion ausgelöst. Auf diese Weise können wir den Upload-Fortschritt jedes Bildes in Echtzeit ermitteln und dem Benutzer anzeigen.

Wenn Sie diese Komponente verwenden, müssen Sie sie nur auf der Seite vorstellen, auf der Sie Bilder hochladen müssen. Zum Beispiel:

<template>
  <div>
    <image-uploader></image-uploader>
  </div>
</template>

<script>
import ImageUploader from './ImageUploader.vue';

export default {
  components: {
    ImageUploader,
  },
};
</script>

Nach dem Login kopieren

Durch das obige Codebeispiel können wir die Fortschrittsanzeigefunktion beim Hochladen mehrerer Bilder implementieren. In der tatsächlichen Entwicklung können wir die Komponenten entsprechend den Anforderungen des Projekts erweitern und anpassen, um funktionale Anforderungen zu erfüllen. 🎜🎜Zusammenfassend lässt sich sagen, dass Sie in der Vue-Entwicklung zur Lösung des Problems der Fortschrittsanzeige beim Hochladen mehrerer Bilder Vue-Komponenten und die Axios-Bibliothek verwenden müssen. Durch die Überwachung der Rückruffunktion für den Upload-Fortschritt können wir den Upload-Fortschritt jedes Bildes in Echtzeit ermitteln und dem Benutzer anzeigen, wodurch die Benutzererfahrung verbessert wird. Ich hoffe, dass die in diesem Artikel vorgestellte Methode Vue-Entwicklern dabei hilft, das Problem der Fortschrittsanzeige beim Hochladen von Bildern zu lösen. 🎜

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der Fortschrittsanzeige beim Hochladen mehrerer Bilder in der Vue-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!