el-upload中断取消

在使用 Element UI 的 el-upload 组件时，如果需要实现上传的中断和取消功能，可以通过调用 el-upload 组件的 abort 方法来停止当前的上传请求。

以下是一个简单的例子，展示了如何在 Vue 中使用 el-upload 组件并添加取消上传的功能：

<template>
  <div>
    <el-upload
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-success="handleSuccess"
      :before-upload="handleBeforeUpload">
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
      <el-button size="small" type="danger" @click="cancelUpload">取消上传</el-button>
    </el-upload>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      uploadTask: null
    };
  },
  methods: {
    handleBeforeUpload(file) {
      this.uploadTask = file;
      // 你可以在这里添加其他的上传前的逻辑
      // 如果返回 false 或者返回 Promise 并且被 reject，那么上传会被阻止
    },
    handleSuccess(response, file, fileList) {
      console.log('Upload success:', response);
      // 你可以在这里添加上传成功后的逻辑
    },
    cancelUpload() {
      if (this.uploadTask) {
        this.$refs.upload.abort(); // 中断上传
        this.uploadTask = null;
      }
    }
  }
};
</script>

在这个例子中，我们定义了一个 handleBeforeUpload 方法，它会在每个文件上传之前被调用。我们保存了 file 对象到 uploadTask 属性中，以便在需要时引用它。cancelUpload 方法通过访问 el-upload 组件的 abort 方法来中断上传。如果当前没有正在进行的上传任务，它将不做任何操作。

请注意，action 属性需要设置为一个有效的上传API地址，这里使用的是一个示例地址。在实际应用中，你需要替换为你的真实上传接口。