Vue 개발에서 여러 사진을 업로드할 때 진행률 표시 문제를 해결하는 방법

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

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

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

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