el-upload 上传文件名过长悬浮展示

可以使用 `el-tooltip` 组件来实现悬浮展示，具体实现方法如下：

1. 在 `el-upload` 组件中添加 `list-type="picture-card"` 属性，让上传的文件以图片卡片的形式展示。

2. 使用 `slot-scope` 属性来自定义上传列表中每个文件的内容，并在需要展示文件名的元素上添加 `el-tooltip` 组件。

3. 在 `el-tooltip` 组件中设置 `content` 属性为文件名，并设置 `placement` 属性为 `top-start` 或 `top-end`，让提示框在元素上方悬浮展示。

示例代码如下：

<el-upload
  class="upload-demo"
  action="/upload"
  list-type="picture-card"
>
  <template slot-scope="{ file }">
    <div class="file">
      <img src="file.url" alt="" class="file-img">
      <el-tooltip class="item" effect="dark" :content="file.name" placement="top-start">
        <div class="file-name">{{ file.name }}</div>
      </el-tooltip>
    </div>
  </template>
</el-upload>

需要注意的是，由于 `el-upload` 组件的上传列表是异步渲染的，所以如果需要在组件加载时就对上传列表中的元素进行操作，可以使用 `ref` 属性来获取上传列表组件，然后在 `mounted` 钩子函数中监听 `change` 事件，等待上传列表渲染完成后再进行操作。示例代码如下：

<el-upload
  class="upload-demo"
  action="/upload"
  list-type="picture-card"
  ref="upload"
>
  <template slot-scope="{ file }">
    <div class="file">
      <img src="file.url" alt="" class="file-img">
      <el-tooltip class="item" effect="dark" :content="file.name" placement="top-start">
        <div class="file-name">{{ file.name }}</div>
      </el-tooltip>
    </div>
  </template>
</el-upload>

mounted() {
  this.$nextTick(() => {
    this.$refs.upload.$el.addEventListener('change', () => {
      // 在上传列表渲染完成后进行操作
      // ...
    })
  })
}