vue 中 想用普通按钮替换element中的上传组件(＜el-upload＞)，就是不想在页面显示上传组件 只用普通方法调用上传组件

在 Vue 2 中，如果你想要在不显示 Element UI 的上传组件（`<el-upload>`）的情况下，通过调用某个方法来实现上传功能，你可以使用程序控制的方式来触发上传组件的行为。以下是实现这一功能的步骤：

1. **定义上传组件**：首先，你需要在组件中定义一个 `<el-upload>` 组件，并设置必要的属性和事件监听器。

2. **隐藏上传组件**：你可以通过 CSS 将上传组件的样式设置为 `display: none`，这样它就不会在页面上显示出来。

3. **触发上传行为**：在你的 `add` 方法中，可以通过 JavaScript 触发文件选择对话框，并将其关联到隐藏的上传组件上。

4. **处理上传逻辑**：根据 `<el-upload>` 组件的事件来处理上传逻辑。

下面是一个简单的示例：

```vue
<template>
  <div>

    <!-- 隐藏的上传组件 -->
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      style="display: none;"
      ref="hiddenUpload">
      <!-- 这里可以放置一个按钮或其他触发方式，但将其隐藏 -->
    </el-upload>
    <!-- 其他内容 -->
    <button @click="add">添加文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload', // 你的上传接口地址
    };
  },
  methods: {
    add() {
      // 触发文件选择
      this.$refs.hiddenUpload.$el.querySelector('input[type="file"]').click();
    },
    handleBeforeUpload(file) {
      // 可以在这里添加文件上传前的逻辑
      // 返回 false 可以阻止上传
      return true;
    },
    handleSuccess(response, file, fileList) {
      // 文件上传成功的处理
    },
    handleError(error, file, fileList) {
      // 文件上传失败的处理
    }
  }
};
</script>
```

在这个示例中，`<el-upload>` 组件被设置为隐藏，通过 `style="display: none;"`。`add` 方法通过引用上传组件的 `ref` 来找到内部的文件输入元素，并触发 `click` 事件来打开文件选择对话框。这样，用户就可以选择文件，而上传组件本身并不显示在页面上。

请注意，这种方法依赖于 DOM 操作，可能不是最优雅或最可维护的解决方案。另外，由于浏览器的安全策略，自动触发文件选择对话框可能会受到限制。因此，这种方法可能需要用户的实际交互（如点击按钮）来触发。

此外，Element UI 的 `<el-upload>` 组件可能还有其他配置项和事件，你可能需要根据你的具体需求进行调整。
（因为我的项目按钮是通过组件一下子显示出来的，并且是可以分配显示权限，所以我不能直接使用element的上传组件，直接使用组件的话 没有办法给它分配权限，所以只能这样使用）

说白了  就是用add方法去调用上传组件中 :before-upload="handleBeforeUpload" 这个方法