Bagaimana untuk menyelesaikan masalah paparan kemajuan apabila memuat naik berbilang gambar dalam pembangunan Vue-tutorial php-php.cn

Bagaimana untuk menyelesaikan masalah paparan kemajuan apabila memuat naik berbilang gambar dalam pembangunan Vue

王林

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

asal

1216 orang telah melayarinya

Bagaimana untuk menyelesaikan masalah paparan kemajuan apabila memuat naik berbilang gambar dalam pembangunan Vue

Dengan perkembangan pesat Internet, muat naik gambar telah menjadi salah satu operasi biasa dalam pembangunan harian kami. Apabila pengguna perlu memuat naik berbilang gambar, mereka selalunya perlu memaparkan kemajuan muat naik supaya pengguna dapat memahami dengan jelas status dan kemajuan muat naik. Bagi pembangun Vue, cara menyelesaikan masalah paparan kemajuan apabila memuat naik berbilang imej telah menjadi pertimbangan teknikal yang penting.

Artikel ini akan memperkenalkan penyelesaian untuk memaparkan kemajuan muat naik imej dengan menggunakan komponen Vue dan perpustakaan Axios.

Pertama, kita perlu mencipta komponen Vue untuk melaksanakan fungsi muat naik imej. Berikut ialah contoh komponen mudah:

<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>

Salin selepas log masuk

Dalam kod di atas, kami telah mewujudkan komponen muat naik imej yang ringkas. Dalam komponen, berbilang fail imej yang dipilih oleh pengguna diperoleh dengan mendengar acara change elemen input. Kami kemudian menggunakan FormData untuk mencipta borang dan melampirkan fail imej yang dipilih pada borang. change事件，获取到用户选择的多个图片文件。然后，我们使用FormData来创建一个表单，并将选择的图片文件附加到表单中。

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

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

Seterusnya, kami menggunakan perpustakaan axios untuk menghantar permintaan POST untuk memuat naik imej ke pelayan. Dalam konfigurasi permintaan axios, kami menggunakan fungsi panggil balik onUploadProgress untuk mendapatkan kemajuan muat naik. Dalam fungsi panggil balik, kita boleh mendapatkan peratusan kemajuan muat naik dengan mengira bilangan bait yang dimuat naik dan jumlah bilangan bait, dan mencetaknya melalui konsol.

Akhir sekali, kami menyimpan maklumat imej yang berjaya dimuat naik yang dikembalikan oleh pelayan ke dalam tatasusunan uploadedImages komponen dan memaparkannya pada halaman.

Apabila pengguna memilih berbilang gambar untuk dimuat naik, pelaksanaan fungsi panggil balik kemajuan akan dicetuskan setiap kali gambar dimuat naik. Dengan cara ini, kita boleh mendapatkan kemajuan muat naik setiap imej dalam masa nyata dan memaparkannya kepada pengguna.

Apabila menggunakan komponen ini, anda hanya perlu memperkenalkannya ke halaman di mana anda perlu memuat naik imej. Contohnya:

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

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

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

Salin selepas log masuk

Melalui contoh kod di atas, kita boleh merealisasikan fungsi paparan kemajuan apabila memuat naik berbilang gambar. Dalam pembangunan sebenar, kami boleh mengembangkan dan menyesuaikan komponen mengikut keperluan projek untuk memenuhi keperluan yang lebih berfungsi. 🎜🎜Ringkasnya, dalam pembangunan Vue, untuk menyelesaikan masalah paparan kemajuan apabila memuat naik berbilang gambar, anda perlu menggunakan komponen Vue dan perpustakaan Axios. Dengan memantau fungsi panggil balik kemajuan muat naik, kami boleh mendapatkan kemajuan muat naik setiap imej dalam masa nyata dan memaparkannya kepada pengguna, sekali gus meningkatkan pengalaman pengguna. Saya berharap kaedah yang diperkenalkan dalam artikel ini akan membantu pembangun Vue untuk menyelesaikan masalah paparan kemajuan muat naik imej. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah paparan kemajuan apabila memuat naik berbilang gambar dalam pembangunan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!