el-upload 文件名过长显示问题
时间: 2023-10-16 18:09:36 浏览: 119
如果您使用的是 Element UI 的 el-upload 组件,当文件名过长时可能会导致显示问题。您可以通过设置属性 `show-file-list` 为 `false`,这样文件名就不会显示在上传组件旁边的列表中,而是直接显示在上传按钮旁边。如果您想要保留文件列表的显示,可以通过 CSS 样式来调整文件名的显示样式,比如缩小字体、换行等方式来解决问题。
相关问题
el-upload 文件名过长悬浮显示
你可以使用 `el-tooltip` 组件来实现文件名过长时的悬浮显示。首先在 `el-upload` 的 `slot-scope` 中获取到文件名,然后将 `el-tooltip` 组件包裹在 `el-upload-list` 的子元素中,设置 `content` 属性为文件名,`effect` 属性为 `dark`,`placement` 属性为 `top` 或者 `bottom`,这样当鼠标悬浮在文件名上时,就会显示一个提示框来显示完整的文件名。
示例代码:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
:list-type="'picture-card'"
:before-upload="beforeUpload"
:limit="3"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-error="handleError"
:show-file-list="false"
>
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
<template slot-scope="{ file }">
<el-tooltip class="item" effect="dark" :content="file.name" :placement="$index % 2 === 0 ? 'bottom' : 'top'">
<img :src="file.url" class="el-upload-list__item-thumbnail" :class="{ 'is-removed': file.status === 'removed' }">
<i class="el-icon-close" @click="handleRemove(file)"></i>
</el-tooltip>
</template>
</el-upload>
```
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`,让提示框在元素上方悬浮展示。
示例代码如下:
```html
<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` 事件,等待上传列表渲染完成后再进行操作。示例代码如下:
```html
<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>
```
```javascript
mounted() {
this.$nextTick(() => {
this.$refs.upload.$el.addEventListener('change', () => {
// 在上传列表渲染完成后进行操作
// ...
})
})
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)