vue3获取文件上传进度

要在Vue3中获取文件上传进度，可以使用axios或fetch等库来发送文件上传请求，并使用XMLHttpRequest对象来获取上传进度。以下是一个使用axios的示例代码：

1.首先，安装axios库并导入：

npm install axios
import axios from 'axios'

2.然后，在Vue组件中定义一个方法来处理文件上传请求：

methods: {
  handleFileUpload() {
    const formData = new FormData()
    formData.append('file', this.file)
    axios.post('/upload', formData, {
      onUploadProgress: progressEvent => {
        this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      }
    }).then(response => {
      console.log(response.data)
    })
  }
}

3.在模板中，使用一个文件输入框来选择要上传的文件，并在上传按钮上绑定handleFileUpload方法：

<template>
  <div>
    <input type="file" @change="fileSelected">
    <button @click="handleFileUpload">上传</button>
    <div v-if="uploadProgress > 0">
      上传进度：{{ uploadProgress }}%
    </div>
  </div>
</template>

4.最后，在Vue组件中定义一个fileSelected方法来获取用户选择的文件：

methods: {
  fileSelected(event) {
    this.file = event.target.files[0]
  },
  handleFileUpload() {
    // ...
  }
}