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 自定义删除文件按钮

el-upload 是 Element UI 提供的文件上传组件，它可以方便地实现文件上传功能。要自定义删除文件按钮，可以通过 slot 来实现。

首先，在 el-upload 组件中添加一个名为 "default" 的 slot，用于自定义上传文件列表的展示。在该 slot 中，可以使用 v-for 指令遍历上传的文件列表，并为每个文件添加一个删除按钮。

具体代码如下：

<el-upload
  action="/upload"
  :on-success="handleSuccess"
  :file-list="fileList"
>
  <template #default="{ file, fileList }">
    <div class="file-item" v-for="(item, index) in fileList" :key="index">
      <span>{{ item.name }}</span>
      <el-button type="text" @click="handleDelete(index)">删除</el-button>
    </div>
  </template>
</el-upload>

在上述代码中，`fileList` 是一个数组，用于存储上传的文件列表。`handleSuccess` 是上传成功后的回调函数，你可以根据实际需求进行处理。

接下来，在 Vue 实例中定义 `handleDelete` 方法，用于删除文件。具体代码如下：

methods: {
  handleDelete(index) {
    this.fileList.splice(index, 1);
  },
  handleSuccess(response, file, fileList) {
    // 处理上传成功后的逻辑
  }
}

在 `handleDelete` 方法中，使用 `splice` 方法从 `fileList` 数组中删除指定索引的文件。

这样，你就可以自定义 el-upload 的删除文件按钮了。