vue2在el-upload不设置action自定义上传逻辑

在 Vue 2 中，你可以使用 methods 和 data 来定义你的组件逻辑和状态。对于 Element UI 的 el-upload 组件，你可以通过监听 change 事件来自定义上传逻辑，而不是设置 action 属性。

以下是一个 Vue 2 组件的示例，展示了如何自定义 el-upload 的上传逻辑：

<template>  
  <el-upload  
    class="upload-demo"  
    action="#"  
    :on-change="handleFileUpload"  
    :show-file-list="false"  
    :auto-upload="false"  
  >  
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>  
  </el-upload>  
</template>  
  
<script>  
import axios from 'axios';  
  
export default {  
  data() {  
    return {  
      selectedFile: null,  
    };  
  },  
  methods: {  
    handleFileUpload(file, fileList) {  
      this.selectedFile = file.raw; // 获取原始的 File 对象  
  
      // 在这里可以添加一些文件类型、大小的校验逻辑  
      // ...  
  
      // 如果文件符合要求，执行自定义上传逻辑  
      if (this.selectedFile) {  
        this.uploadFile();  
      }  
    },  
    uploadFile() {  
      const formData = new FormData();  
      formData.append('file', this.selectedFile);  
  
      axios.post('/your-upload-api-url', formData, {  
        headers: {  
          'Content-Type': 'multipart/form-data'  
        }  
      })  
      .then(response => {  
        // 处理上传成功后的逻辑  
        console.log('上传成功', response.data);  
        // 根据需要更新你的组件状态或执行其他操作  
      })  
      .catch(error => {  
        // 处理上传失败后的逻辑  
        console.error('上传失败', error);  
      });  
    }  
  }  
};  
</script>

在这个 Vue 2 组件中：

1. data 函数返回一个对象，其中包含 selectedFile 属性，用于存储用户选择的文件。
2. handleFileUpload 方法是 el-upload 组件的 change 事件的监听器。当用户选择文件时，这个方法会被调用，并将选中的文件保存到 selectedFile 中。
3. 在 handleFileUpload 方法中，你可以添加文件类型和大小的校验逻辑。如果文件符合要求，就调用 uploadFile 方法执行自定义的上传逻辑。
4. uploadFile 方法使用 Axios 发送一个 POST 请求到指定的上传 API 地址，并附带选中的文件。(统一API管理，参数传过去就行)
5. 在 then 和 catch 块中处理上传成功和失败的情况。

请确保将 /your-upload-api-url 替换为你实际的后端上传 API 地址，并根据你的需求调整文件选择和上传的逻辑。此外，确保你已经安装了 axios 并正确导入到你的组件中。