vue3文件上传并显示上传进度

可以使用Vue3的Composition API来实现文件上传并显示上传进度。以下是一个简单的示例：

首先，你需要在Vue组件中引入`ref`和`onMounted`方法：

import { ref, onMounted } from 'vue';

然后，在组件中定义一个`ref`变量来存储上传的文件和上传进度：

const file = ref(null);
const progress = ref(0);

接下来，你需要编写一个方法来处理文件上传，并更新进度：

function uploadFile() {
  // 创建FormData对象
  const formData = new FormData();
  formData.append('file', file.value);

  // 创建XMLHttpRequest对象
  const xhr = new XMLHttpRequest();

  // 监听上传进度
  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      progress.value = Math.round((event.loaded / event.total) * 100);
    }
  });

  // 监听上传完成事件
  xhr.addEventListener('load', () => {
    // 上传完成后的处理逻辑
    console.log('上传完成');
  });

  // 发送请求
  xhr.open('POST', '/upload');
  xhr.send(formData);
}

最后，在组件的模板中添加一个文件选择器和一个上传按钮，并绑定相关的事件：

<template>
  <div>
    <input type="file" @change="file = $event.target.files[0]">
    <button @click="uploadFile">上传</button>
    <div v-if="progress > 0">上传进度: {{ progress }}%</div>
  </div>
</template>

完整的组件代码如下：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const file = ref(null);
    const progress = ref(0);

    function uploadFile() {
      const formData = new FormData();
      formData.append('file', file.value);

      const xhr = new XMLHttpRequest();

      xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
          progress.value = Math.round((event.loaded / event.total) * 100);
        }
      });

      xhr.addEventListener('load', () => {
        console.log('上传完成');
      });

      xhr.open('POST', '/upload');
      xhr.send(formData);
    }

    return {
      file,
      progress,
      uploadFile
    };
  }
};

这样，当用户选择文件并点击上传按钮时，文件将被上传到服务器，并且上传进度将实时显示在页面上。请注意，你需要将`/upload`替换为实际的上传接口地址。