526互联

element-ui plus中如何单独出发el-upload提交

发布时间 2023-03-31 17:46:32作者: 盘思动

  • 因为单独提交才好触发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 引用来进行访问和操作。