VUE3+Element Plus `Upload`组件 实现自定义上传=进度条

<template>
  <el-upload
    class="upload-demo"
    action=""
    :http-request="uploadFile"
    :on-progress="handleProgress"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button slot="trigger" type="primary">选取文件</el-button>
    <div slot="tip" class="el-upload__tip">
      只能上传jpg/png文件，且不超过500kb
    </div>
  </el-upload>
  <div v-if="progress > 0">
    上传进度：{{ progress }}%
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const progress = ref(0);

const uploadFile = async ({ file, onProgress, onSuccess, onError }) => {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await axios.post('your-upload-url', formData, {
      onUploadProgress: event => {
        const percentCompleted = Math.round((event.loaded * 100) / event.total);
        onProgress({ percent: percentCompleted });
      }
    });

    onSuccess(response.data);
  } catch (error) {
    onError(error);
  }
};

const handleProgress = event => {
  progress.value = event.percent;
};

const handleSuccess = () => {
  progress.value = 0;
  // 显示成功消息
  console.log('上传成功');
};

const handleError = () => {
  progress.value = 0;
  // 显示错误消息
  console.error('上传失败');
};
</script>

<style>
.upload-demo {
  margin: 20px;
}
</style>

说明

• 响应式数据：使用ref来创建响应式变量progress，来跟踪和显示上传进度。

• 自定义上传功能：uploadFile方法中使用axios库进行文件上传，并结合onProgress回调来更新上传进度。

• 响应式更新：通过progress.value来获取和更新上传的进度信息，这样当进度改变时，视图会自动响应变化。

请确保你在项目中安装了axios库，并根据需求修改your-upload-url为实际的文件上传地址。