改变el-upload内容展示位置

在Element UI的`el-upload`组件中，如果你想改变上传文件的内容展示位置，通常是在`upload-list`选项中控制。`upload-list`是一个数组，你可以自定义每个上传进度或成功的文件项模板，通过修改这部分的HTML结构来调整显示样式。

例如，如果你想要将文件名和状态信息放在上传按钮下方，你可以这样做：

<template>
  <el-upload
    :action="uploadUrl"
    list-type="text"
    :on-success="handleSuccess"
    :file-list="fileList">
    <i class="el-icon-plus"></i>
    <div slot="tip" style="padding-bottom: 8px;">点击选择文件</div>
    <!-- 自定义上传列表 -->
    <div v-for="(item, index) in fileList" :key="index">
      <p>{{ item.file.name }}</p>
      <span class="status">{{ item.status }}</span> <!-- 这里可以调整状态信息的位置 -->
      <button @click="handleRemove(index)">删除</button>
    </div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '',
      fileList: [],
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.fileList.push({
        file: file,
        status: '上传成功',
      });
    },
    handleRemove(index) {
      this.fileList.splice(index, 1);
    },
  },
};
</script>

在这里，我们添加了一个`<p>`标签用于文件名，然后在每个上传项下面添加了一个`<span>`标签用于显示状态。你可以根据需要调整这两个元素的CSS布局使其移动到你需要的位置。