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

在 Vue 3 中，你可以使用 Composition API 来组织和管理你的组件逻辑。当你想要在 el-upload 组件中自定义上传逻辑而不设置 action 属性时，你可以使用 ref 和 watch 来跟踪文件的变化，并在适当的时候执行自定义的上传逻辑。

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

<template>  
  <el-upload  
    ref="uploadRef"  
    :on-change="handleFileChange"  
    :show-file-list="false"  
  >  
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>  
  </el-upload>  
</template>  
  
<script>  
import { ref, watch, onMounted } from 'vue';  
import axios from 'axios';  
  
export default {  
  setup() {  
    const uploadRef = ref(null);  
    const selectedFile = ref(null);  
  
    // 处理文件变化  
    const handleFileChange = (file, fileList) => {  
      selectedFile.value = file.raw; // 获取原始的 File 对象  
    };  
  
    // 自定义上传逻辑  
    const uploadFile = async () => {  
      if (!selectedFile.value) {  
        console.error('没有选择要上传的文件');  
        return;  
      }  
  
      // 在这里可以添加一些文件类型、大小的校验逻辑  
      // ...  
  
      const formData = new FormData();  
      formData.append('file', selectedFile.value);  
  
      try {  
        const response = await axios.post('/your-upload-api-url', formData, {  
          headers: {  
            'Content-Type': 'multipart/form-data'  
          }  
        });  
  
        // 处理上传成功后的逻辑  
        console.log('上传成功', response.data);  
      } catch (error) {  
        // 处理上传失败后的逻辑  
        console.error('上传失败', error);  
      }  
    };  
  
    // 监听 selectedFile 的变化，并在组件挂载后执行上传逻辑（如果需要）  
    watch(selectedFile, (newVal) => {  
      if (newVal) {  
        uploadFile(); // 当文件被选择时，执行上传逻辑  
      }  
    }, { immediate: false }); // immediate: false 表示不在初始时触发  
  
    // 在组件挂载后执行其他逻辑（如果需要）  
    onMounted(() => {  
      // ...  
    });  
  
    // 返回需要暴露给模板的响应式引用  
    return {  
      uploadRef,  
      handleFileChange  
    };  
  }  
};  
</script>

在这个 Vue 3 组件中：

1. 我们使用 ref 创建了两个响应式引用：uploadRef 用于访问 el-upload 组件的实例，selectedFile 用于存储用户选择的文件。
2. handleFileChange 方法在文件变化时被调用，并将选中的文件保存到 selectedFile 中。
3. uploadFile 方法包含了自定义的上传逻辑，它使用 Axios 发送一个 POST 请求到指定的上传 API 地址。
4. 使用 watch 来监听 selectedFile 的变化。当文件被选择时，watch 的回调函数会被触发，并调用 uploadFile 方法执行上传。注意，immediate: false 表示我们不想在组件初始化时立即触发 watch 的回调函数。
5. onMounted 钩子函数用于在组件挂载后执行任何必要的逻辑（如果需要的话）。
6. 最后，通过 return 语句将 uploadRef 和 handleFileChange 暴露给模板，以便在模板中使用它们。

请确保将 /your-upload-api-url 替换为你实际的后端上传 API 地址，并根据你的需求调整文件选择和上传的逻辑。