vue2 element el-upload 文件上传，上传按钮前面加一个文本 输入框，同时触发 上传的文件列表,是处于 输入框下方，详细代码

在Vue2中，Element UI库提供了一个`el-upload`组件用于文件上传，如果你想在上传按钮前添加一个文本输入，并展示上传的文件列表，你可以这样做：

首先，安装Element UI和Element Plus (如果你还没有安装)：

npm install vue-element-plus el-upload

然后，在组件模板中，你可以创建一个包含文本输入和上传按钮的结构，并结合`el-upload`组件：

<template>
  <div>
    <!-- 文本输入框 -->
    <input type="text" v-model="fileInput" placeholder="请输入文件描述">

    <!-- 上传按钮和el-upload组件 -->
    <el-button @click="handleUpload">选择文件并上传</el-button>
    
    <!-- 使用Element Plus的分隔符，它会自动插入一个空行 -->
    <el-divider></el-divider>

    <!-- 显示上传的文件列表 -->
    <el-upload
      :action="uploadUrl"
      list-type="table"
      :auto-upload="false"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <el-button size="small" type="text" disabled>已选 {{ uploadedFiles.length }} 个文件</el-button>
    </el-upload>
  </div>
</template>

接下来，设置数据绑定和事件处理函数：

<script setup>
import { ElUpload } from 'element-plus';
import { ref } from 'vue';

const fileInput = ref('');
const uploadUrl = 'your-upload-url'; // 替换为你的实际上传URL

// 文件选择和显示
function handleUpload() {
  fileInput.value = '';
  // 如果需要，可以在这里调用一个上传文件的API
}

// 文件改变时的操作
function handleChange(fileList) {
  console.log('文件改变', fileList);
  // 更新已上传文件列表
  setUploadedFiles([...uploadedFiles, ...fileList]);
}

// 文件上传成功回调
function onSuccess(response, file) {
  console.log('文件上传成功', response, file);
}

// 文件上传错误回调
function onError(error, file) {
  console.log('文件上传失败', error, file);
}

// 存储已上传文件
let uploadedFiles = ref([]);

function setUploadedFiles(newFiles) {
  uploadedFiles.value = newFiles;
}
</script>

这样，每次用户在文本输入框输入内容并点击“选择文件并上传”按钮时，都会触发`handleUpload`函数，同时文件列表会动态更新。注意，你需要根据实际情况调整上传逻辑和错误处理。