elementUI 的上传组件＜el-upload＞，自定义上传按钮样式

在Element UI的<el-upload>组件中，可以通过slot来自定义上传按钮的样式。以下是一个简单的例子，展示如何自定义上传按钮：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
  >
    <el-button size="small" type="primary" icon="el-icon-upload">上传文件</el-button>
    <!-- 或者使用其他HTML结构作为自定义按钮 -->
    <div slot="trigger" class="custom-upload">
      选择文件
    </div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handlePreview(file) {
      // 点击文件列表中已上传的文件时的钩子
    },
    handleRemove(file, fileList) {
      // 文件移除钩子
    },
    beforeRemove(file, fileList) {
      // 移除文件之前的钩子，返回 `false` 或 Promise 可停止移除
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      // 文件超出最大数量钩子
      this.$message.warning(`最多只能上传 ${this.limit} 个文件！`);
    }
  }
};
</script>
 
<style>
.custom-upload {
  display: inline-block;
  padding: 8px 12px;
  background: #00aa00;
  color: white;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}
</style>

在这个例子中，我们使用了<el-button>作为默认的上传触发器，并通过slot="trigger"自定义了一个<div>作为新的触发器。你可以在<style>标签中编写CSS来设计自定义按钮的样式。