How to solve the problem of progress display when uploading multiple pictures in Vue development

How to solve the problem of progress display when uploading multiple pictures in Vue development

With the rapid development of the Internet, picture uploading has become one of the common operations in our daily development. When users need to upload multiple pictures, they often need to display the upload progress so that users can clearly understand the status and progress of the upload. For Vue developers, how to solve the problem of progress display when uploading multiple images has become an important technical consideration.

This article will introduce a solution to display the progress of image uploading by using Vue components and Axios libraries.

First, we need to create a Vue component to implement the image upload function. The following is a simple sample component:

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

In the above code, we established a simple image upload component. In the component, multiple image files selected by the user are obtained by listening to the change event of the input element. We then use FormData to create a form and attach the selected image file to the form.

Next, we use the axios library to send a POST request to upload the image to the server. In the configuration of the axios request, we use the onUploadProgress callback function to obtain the upload progress. In the callback function, we can get the upload progress percentage by calculating the number of uploaded bytes and the total number of bytes, and print it out through the console.

Finally, we store the successfully uploaded image information returned by the server into the uploadedImages array of the component and display it on the page.

When the user selects multiple pictures to upload, each time a picture is uploaded, the execution of the progress callback function will be triggered. In this way, we can obtain the upload progress of each image in real time and display it to the user.

When using this component, you only need to introduce it into the page where images need to be uploaded. For example:

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

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

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

Through the above code example, we can realize the progress display function when uploading multiple pictures. In actual development, we can expand and customize the components according to the needs of the project to meet more functional requirements.

To sum up, in Vue development, to solve the problem of progress display when uploading multiple pictures, you need to use Vue components and Axios libraries. By monitoring the upload progress callback function, we can obtain the upload progress of each image in real time and display it to the user, thus improving the user experience. I hope that the method introduced in this article will be helpful to Vue developers to solve the problem of image upload progress display.

The above is the detailed content of How to solve the problem of progress display when uploading multiple pictures in Vue development. For more information, please follow other related articles on the PHP Chinese website!