el-upload封装原创

父组件模板

<template>
  <div>
    <upload-component @file-selected="handleFileSelected"></upload-component>
  </div>
</template>

<script>
import UploadComponent from './UploadComponent.vue';

export default {
  components: {
    UploadComponent
  },
  methods: {
    handleFileSelected(file) {
      // 处理选中的文件
      console.log('选中的文件：', file);
      // 执行其他逻辑
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子组件模板（UploadComponent.vue）

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :on-change="handleFileChange"
    >
      <el-button slot="trigger">选取文件</el-button>
      <el-button style="margin-left: 10px;">上传到服务器</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    handleFileChange(file) {
      // 触发自定义事件将文件传递给父组件
      this.$emit('file-selected', file);
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在子组件中，当文件发生变化时，通过this.$emit方法触发file-selected事件，并将文件作为参数传递给父组件。

在父组件中，使用@file-selected监听子组件触发的file-selected事件，并在handleFileSelected方法中处理选中的文件。

这样，当在子组件中选择文件时，会将文件传递给父组件，并在父组件中处理选中文件的逻辑。

请根据你的项目需求进行相应的修改。

#前端

上次更新: 2024/01/14 16:27:31

← vue-element-admin使用文件上传→