el-upload 选择文件，在文本框展示选中名称，未选中文本框置灰

在 Element UI 的 `el-upload` 组件中，如果你想在用户选择文件后在文本框显示所选文件的名称，并且当用户还未选择文件时文本框保持灰色状态，你可以这样做：

首先，创建一个 `v-model` 指向一个数组，用于保存已选择的文件信息，如 `{name: 'file name', url: 'file URL'}`。然后，给文本框绑定这个 `v-model`，并添加 `clearable` 属性以便用户清除已选择的文件。

在 `handleSuccess` 或 `handleDrop` 函数中更新这个数组，并相应地更新文本框的内容。

<template>
  <el-form-item label="上传文件">
    <el-upload
      v-model="selectedFiles"
      :action="uploadUrl"
      list-type="picture-card"
      :on-success="handleSuccess"
      :on-drop="handleDrop"
      :default-file-list="defaultFiles"
      clearable
    >
      <i class="el-icon-plus"></i> 添加图片
    </el-upload>
    <el-input v-if="selectedFiles.length" :value="selectedFiles.map(file => file.name).join(', ')" placeholder="未选择文件"></el-input>
    <span v-else>请选择文件</span>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      selectedFiles: [], // 存储已选文件信息
      uploadUrl: 'your-upload-api-url',
      defaultFiles: [{ name: '', url: '' }] // 默认未选择文件的状态
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.selectedFiles.push({ name: file.name, url: response.data.url });
    },
    handleDrop(files) {
      this.selectedFiles = files;
    }
  }
};
</script>

当 `selectedFiles` 为空时，文本框显示 "请选择文件"；一旦有文件被选择，文本框会显示选中的文件名列表。