el-upload覆盖

### 实现 `el-upload` 组件的上传行为定制化

为了实现 `el-upload` 组件的上传行为定制化，在 Vue.js 和 Element UI 中可以通过多种方式调整默认行为。一种常见的方式是通过覆盖默认的上传方法并提供自定义逻辑。

#### 使用 `http-request` 属性来自定义上传请求

Element UI 提供了一个名为 `http-request` 的属性，允许开发者完全控制文件上传的过程。这使得可以编写自己的 AJAX 请求处理函数[^2]：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
      :http-request="customUpload">
      <button>点击上传</button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload'
    };
  },
  methods: {
    customUpload(options) {
      const formData = new FormData();
      formData.append('file', options.file);

      axios.post(this.uploadUrl, formData, {
        headers: {'Content-Type': 'multipart/form-data'},
        onUploadProgress: progressEvent => {
          let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          console.log(`当前进度:${percentCompleted}%`);
        }
      }).then(response => {
        this.handleSuccess(response.data, options.file, options.filesList);
      }).catch(error => {
        this.handleError(error, options.file, options.filesList);
      });
    },

    handleBeforeUpload(file) {
      // 可在此处添加前置校验逻辑
      return true;
    },

    handleProgress(event, file, fileList) {
      // 处理上传过程中的事件
    },

    handleSuccess(response, file, fileList) {
      // 成功后的回调操作
    },

    handleError(err, file, fileList) {
      // 错误处理
    }
  }
};
</script>

上述代码展示了如何利用 `http-request` 来替代默认的上传机制，并实现了更复杂的业务需求，比如监控上传进度、处理响应结果以及错误情况下的反馈。