vue2的onUploadProgress上传文件如何实现暂停上传功能

在Vue2中，利用`axios`库（通常用于处理HTTP请求，包括文件上传）配合`@upload-progress`事件可以实现文件上传进度监听并暂停功能。假设你已经在项目中安装了axios，并且使用了element-ui的`el-upload`组件，你可以这样做：

1. 首先，在你的上传组件上绑定`before-upload`和`on-progress`事件：

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :on-progress="handleProgress"
    :before-upload="beforeUpload"
    ...其他配置...
  >
    <button @click="pauseUpload">暂停上传</button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    // 检查是否需要上传（例如检查表单有效性）
    beforeUpload(file) {
      return true;
    },
    
    // 进度监听函数
    handleProgress(progressEvent) {
      if (this.uploadPaused) {
        // 如果暂停标志为true，则阻止默认的上传过程
        progressEvent.preventDefault();
      }
    },
    
    // 开始上传并设置暂停标识
    pauseUpload() {
      this.uploadPaused = true; // 设置暂停状态为true
      this.$refs.upload.pause(); // 调用axios的pause方法暂停上传
    },
    
    // 当需要继续上传时，恢复操作
    resumeUpload() {
      this.uploadPaused = false; // 设置暂停状态为false
      if (!this.$refs.upload.uploading) { // 检查是否已经暂停，只有在未开始的情况下才继续
        this.$refs.upload.start(); // 调用start方法继续上传
      }
    },
  },
};
</script>

在这个例子中，`uploadPaused`是一个数据属性，用于跟踪上传是否暂停。点击“暂停上传”按钮会设置`uploadPaused`为`true`，然后调用`axios`的`pause`方法暂停上传。如果想继续上传，只需调用`resumeUpload`方法。