el-upload添加自定义按钮

要在 el-upload 中添加自定义按钮，你可以使用 el-button 组件作为自定义按钮，并将其放置在 el-upload 组件的插槽（slot）中。下面是一个示例代码：

<template>
  <div>
    <el-upload
      action="/your-upload-url"
      :auto-upload="false"
      :on-success="handleSuccess"
    >
      <el-button type="primary">自定义按钮</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
    }
  }
}
</script>

在上面的示例中，我们在 el-upload 组件中添加了一个 el-button 组件作为自定义按钮。你可以根据需要修改按钮的样式和内容。同时，我们将 auto-upload 属性设置为 false，以便手动触发上传操作。在 handleSuccess 方法中，你可以处理上传成功后的逻辑。

记得根据你的实际需求修改 action 属性和 handleSuccess 方法中的逻辑。希望对你有帮助！如果还有其他问题，请继续提问。

相关问题

<el-upload>自定义类型

<el-upload>自定义类型可以通过修改CSS样式来实现。使用引用提供的CSS代码可以隐藏原来的选择图片按钮，并设置自定义的宽度和高度。此外，可以使用引用中的js代码来触发上传按钮的点击事件。具体的实现代码如下：

.piao-type-dialog-upload .el-upload-list--picture-card .el-upload-list__item {
  width: 90px;
  height: 90px;
}
.piao-type-dialog-upload .el-upload--picture-card {
  display: none;
}

chooseImg() {
  this.$refs['piaoTypeDialogUpload'].$refs['upload-inner'].handleClick()
}

<el-upload
  :action="UploadUrlR()"
  :on-success="handleSuccessR"
  :on-error="handleErrR"
  multiple
  :limit="1"
  :show-file-list="false"
  :on-exceed="handleExceed"
  :file-list="fileList"
  :on-progress="uploadVideoProcess"
  style="display: inline-block; float: right"
>
  <el-button
    type="text"
    size="small"
    icon="el-icon-upload"
    plain
    class="none-border"
  >
    入口上传
  </el-button>
</el-upload>

以上代码中，CSS部分用于隐藏原始的选择图片按钮并设置自定义的宽度和高度。JS部分用于通过触发点击事件来实现上传按钮的自定义。HTML部分包含了自定义的上传按钮。

el-upload的自定义上传excel

### 实现 `el-upload` 组件自定义上传 Excel 文件

为了实现通过 Element UI 的 `el-upload` 组件来定制化上传 Excel 文件，可以按照如下方式构建：

#### HTML 部分
创建一个用于触发文件选择对话框的按钮，并指定接受的文件类型为 `.xlsx`, `.xls`。

<template>
  <div class="upload-excel">
    <el-upload
      ref="upload"
      :auto-upload="false"
      :on-change="handleChange"
      action=""
      accept=".xlsx, .xls"
      :limit="1"
      :file-list="fileList"
      :class="{ 'disUoloadSty': hideUploadButton }"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <p v-if="!hideUploadButton && fileList.length === 0" style="margin-top:8px;">点击或拖拽Excel文件到此处</p>
    </el-upload>
    <el-button @click="submitUpload" style="margin-left: 10px;" type="success" plain>上传至服务器</el-button>
  </div>
</template>

上述模板中包含了两个主要部分：一个是用来触发文件选择器的按钮；另一个则是实际执行上传操作的按钮。这里还设置了当选择了文件之后不再显示默认的文字提示[^1]。

#### JavaScript/TypeScript 部分
接下来，在脚本里定义处理逻辑，包括改变事件处理器以及提交表单的方法。

<script setup lang="ts">
import { ref } from 'vue';
// 假设这是你的Vue组合API环境下的代码

const upload = ref(null);
let fileList = ref([]);
let hideUploadButton = ref(false);

function handleChange(file, fileList) {
  if (file.raw.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
     file.raw.type !== "application/vnd.ms-excel") {
       this.$message.error('仅支持.xlsx 或者.xls 格式的文件');
       return;
  }
  
  // 清除之前的文件列表并更新新的状态
  fileList.value = [file];
  hideUploadButton.value = true;

}

async function submitUpload() {
  const formData = new FormData();
  formData.append('excelFile', fileList.value[0].raw); 

  try {
    await fetch('/api/upload/excel', {
      method: 'POST',
      body: formData,
    });
    
    console.log('文件已成功上传！');
  } catch(error){
    console.error('上传失败:', error.message);
  }

}
</script>

这段脚本实现了对文件类型的验证，并且只允许一次性的单一文件上传。一旦用户选定了有效的 Excel 文件，则会将其加入到待上传队列当中，并隐藏掉原有的上传按钮[^2]。

#### CSS 部分
最后是控制样式的CSS规则，这部分已经在提供的引用中有提及过，主要用于调整上传区域大小及隐藏上传按钮后的样式效果。

<style scoped>
.uoloadSty .el-upload--picture-card{
  width:110px;
  height:110px;
  line-height:110px;
}
.disUoloadSty .el-upload--picture-card{
  display:none; /* 上传按钮隐藏 */
}
</style>

此段样式确保了即使在不满足条件的情况下也能保持良好的用户体验界面设计。