-
因为单独提交才好触发el-upload中的on-success函数
-
在 Vue 3 中,可以通过 ref 引用指向 upload 组件,然后使用该引用调用 upload 的 submit 方法来触发上传操作。具体实现如下:
<template>
<el-upload ref="uploadRef" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const uploadRef = ref(null);
const handleSubmit = () => {
// 在这里编写提交动作的代码
uploadRef.value.submit();
};
return {
uploadRef,
handleSubmit,
};
},
};
</script>
在上述例子中,我们通过 ref 创建了一个名为 uploadRef 的引用,指向了
然后,在 handleSubmit 方法中,我们通过调用 uploadRef.value.submit() 来触发上传操作。
- 注意:由于 Vue 3 中的组件实例是在 setup 阶段创建的,因此无法在模板中直接使用 $refs 来访问组件实例。而是需要通过 ref 引用来进行访问和操作。