el-upload 控制上传成功后显示位置

vue3 element-plus
我想使用el-upload上传文件后让文件名展示在指定的输入框内请问我怎么做
如下图
问题一去除默认后面展示文件名
问题二前面输入框显示文件名

show-file-list设为false，隐藏已上传列表

on-change事件可以获取到选择文件信息，里面有文件名，赋值给输入框

【以下回答由 GPT 生成】

我将依次回答你提出的两个问题。

问题一: 如何去除el-upload默认的文件名后方的展示文本？

el-upload组件提供了一个属性 show-file-list，可以用来控制是否显示文件列表。默认情况下，当你上传一个文件后，它会在el-upload组件下方以列表的形式展示所有已上传的文件信息，包括文件名、大小等。如果你只想展示文件名，可以将这个属性设置为 false，这样它就只会展示文件名了。

下面是一个示例代码：

<el-upload
  action="/your-upload-url"
  :show-file-list="false"
>
  <el-button slot="trigger">上传文件</el-button>
</el-upload>

在这个示例代码中，我们将 show-file-list 属性设置为 false，这样el-upload组件上传成功后就不会展示文件列表了，只会展示文件名。

问题二: 如何在一个输入框内显示上传成功的文件名？

为了实现这个需求，我们可以使用el-upload的 on-success 事件，该事件会在文件上传成功后触发。我们可以在这个事件里面获取到上传成功的文件信息，然后将文件名赋值给一个在输入框内展示文件名的变量。

下面是一个示例代码片段：

<template>
  <div>
    <el-upload
      action="/your-upload-url"
      :on-success="handleSuccess"
    >
      <el-button slot="trigger">上传文件</el-button>
    </el-upload>

    <el-input v-model="uploadedFileName"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadedFileName: '' // 用于展示上传成功的文件名
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 获取上传成功的文件名
      const fileName = file.name;

      // 将文件名赋值给展示文件名的变量
      this.uploadedFileName = fileName;
    }
  }
};
</script>

在这个示例代码中，我们通过 on-success 事件来触发 handleSuccess 方法。在这个方法内，我们获取到了上传成功的文件名，并将其赋值给 uploadedFileName 变量。然后，在输入框内使用了 v-model 指令来绑定 uploadedFileName 变量，这样当文件上传成功后，文件名就会自动显示在输入框内了。

希望以上解决方案对你有帮助。如果你有任何疑问，请随时向我提问。

【相关推荐】

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7432703
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：还是el-upload的坑，文件名的显示
除此之外, 这篇博客: el-upload上传文件中的 上传前获取签名再上传 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

前面显示文件名可以输入框绑定值，上传改变事件里面赋值
隐藏就是 f12 找到这个div 隐藏啊


<el-upload class="upload-demo" :auto-upload="false" action="#" :limit="1" :file-list="fileList" ref="importFile" :on-change="handleChange">
          <el-input v-model="inputName" style="width: 300px;float: left;"></el-input>
          <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
        </el-upload>


handleChange(file, fileList){
      console.log(file, fileList)
      this.inputName = file.name
    },

<style lang="scss" scoped>
/deep/ .el-upload-list{
  display: none;
}
</style>