el-upload 上传文件 多 默认按钮

`el-upload`是Element UI库中的一个组件，用于文件上传功能。当你需要提供一个默认按钮让用户选择文件上传，并且支持多个文件同时上传时，可以这样做：

1. 首先，在HTML模板中引入`el-upload`组件，以及相关的CSS样式和JS脚本。

<template>
  <div class="upload-container">
    <el-upload
      ref="upload"
      :action="uploadUrl"
      :multiple="true"   <!-- 设置为true表示允许用户一次选择多个文件 -->
      :default-file-list="defaultFiles"  <!-- 默认按钮显示的文件列表 -->
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <el-button type="primary" plain>点击上传</el-button>  <!-- 点击这个按钮触发上传 -->
      <el-button slot="default" @click="chooseFiles">选取文件</el-button>  <!-- 这个是默认按钮 -->
    </el-upload>
    <div v-if="files.length" class="file-list">
      <ul>
        <li v-for="(item, index) in files.slice(0, 5)" :key="index">
          {{ item.file.name }}
          <el-button size="small" @click="removeFile(index)">删除</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>

2. 在Vue实例中设置相关的数据属性和方法：

export default {
  data() {
    return {
      uploadUrl: 'your-server-url',  // 你的服务器上传接口地址
      defaultFiles: [{ name: '默认文件名' }],  // 默认展示的文件信息
      files: [],  // 存储实际上传的文件列表
    };
  },
  methods: {
    chooseFiles() {
      this.$refs.upload.choose();  // 调用上传组件提供的choose方法，打开文件选择器
    },
    handleSuccess(response, file, fileList) {
      this.files.push({ file, response });
    },
    beforeUpload(file) {
      // 可以在这里添加文件上传前的验证或处理逻辑
      return true;  // 返回true表示接受上传
    },
    removeFile(index) {
      this.files.splice(index, 1);  // 删除指定索引的文件
    },
  },
};