<el-upload上传的第一个文件不显示

首先，要确认上传的文件是否符合el-upload的要求，例如文件大小、文件格式等是否符合要求。其次，可以检查一下上传的文件是否已经被提交到服务器端，可以通过查看服务器端的文件存储路径来确认文件是否已经成功上传。另外，还可以检查一下页面的代码是否正确，确保el-upload组件的配置和使用没有问题。如果上传的第一个文件仍然不显示，可以尝试刷新页面或者重新上传文件，有时候这个问题可能是暂时的网络连接问题造成的。如果经过上述的检查和尝试后，依然无法解决问题，建议查看浏览器的控制台日志，寻找可能的报错信息和响应数据，从而更准确地定位问题所在。如果以上方法都无法解决问题，建议查阅el-upload的官方文档或者向相关的技术社区寻求帮助，或者寻求专业的开发人员协助解决问题。总之，要解决el-upload上传的第一个文件不显示的问题，需要仔细检查代码和网络环境，并且耐心地解决可能出现的各种问题。

相关问题

<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload>在这段代码中，怎么样将上传的文件名字显示在页面上，用一个span标签吗

是的，你可以在 `el-upload` 组件内部添加一个 `slot="default"` 的 `span` 标签来显示上传的文件名字。具体实现方式如下：

<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  <span slot="default">
    {{ fileList.length > 0 ? fileList[0].name : '' }}
  </span>
</el-upload>

在上面的代码中，我们添加了一个 `span` 标签，并且指定了 `slot="default"`。在这个 `span` 标签内部，我们使用了 `fileList` 数组来获取上传的文件列表，然后显示第一个文件的文件名字。如果没有上传任何文件，就显示空字符串。

el-upload 上传文件 自动

el-upload组件本身支持多文件上传，但是默认是并发上传，这样容易导致服务器压力过大。如果需要实现自动上传，可以通过设置属性`:auto-upload="false"`来禁用自动上传，然后在上传按钮的点击事件中手动调用上传方法`this.$refs.upload.submit()`来实现逐个上传文件的功能。具体实现可以参考以下代码：

<el-upload
  ref="upload"
  :auto-upload="false"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" type="success" @click="uploadFiles">上传文件</el-button>
</el-upload>

data() {
  return {
    fileList: [], // 上传的文件列表
    currentIndex: 0 // 当前上传的文件索引
  }
},
methods: {
  // 上传文件
  uploadFiles() {
    if (this.fileList.length === 0) {
      this.$message.warning('请先选择文件')
      return
    }
    this.currentIndex = 0 // 重置当前上传的文件索引
    this.uploadFile(this.fileList[this.currentIndex]) // 上传第一个文件
  },
  // 上传单个文件
  uploadFile(file) {
    this.$refs.upload.upload(file.raw) // 调用上传方法
  },
  // 上传成功回调
  handleSuccess(response, file, fileList) {
    this.currentIndex++ // 当前上传的文件索引加1
    if (this.currentIndex < this.fileList.length) {
      this.uploadFile(this.fileList[this.currentIndex]) // 继续上传下一个文件
    } else {
      this.$message.success('上传成功')
    }
  },
  // 上传失败回调
  handleError(err, file, fileList) {
    this.$message.error('上传失败')
  }
}