How can I implement file upload progress in Vue?

How can I implement file upload progress in Vue?

You can use the XMLHttpRequest or the Fetch API with the onUploadProgress event to track the upload progress.

Can you show me a code example?

Sure! Here's a simple example using Axios:

<template>
  <input type="file" @change="uploadFile" />
  <div v-if="progress">Upload Progress: {{ progress }}%</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: 0,
    };
  },
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/upload', formData, {
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      });
    },
  },
};

This will show the upload progress as a percentage.

What if I want to cancel the upload?

You can use the CancelToken feature in Axios to cancel the upload. Here's how you can do it:

const CancelToken = axios.CancelToken;
let cancel;

axios.post('/upload', formData, {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }),
});

// Call cancel() to cancel the upload