element ui el-upload 上传文件 鼠标放在文件名显示全部
时间: 2023-09-08 11:16:22 浏览: 95
您可以通过设置`show-file-list`属性为`true`,将鼠标悬停在文件名上时显示完整文件名。例如:
```html
<el-upload
class="upload-demo"
action="/upload"
:show-file-list="true">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
相关问题
element ui el-upload 上传文件 文件名太长显示不完全 需要鼠标放在文件名显示全部
您可以通过以下两种方式实现文件名过长时鼠标悬停显示全部的效果:
1. 使用tooltip属性
在el-upload组件中添加tooltip属性,并将其值设置为文件名,这样鼠标悬停在文件名上时就会显示全部的文件名。
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:limit="1"
:tooltip="fileName"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
```js
data() {
return {
fileName: ''
}
},
methods: {
handleSuccess(response, file, fileList) {
this.fileName = file.name;
},
beforeUpload(file) {
this.fileName = file.name;
return true;
}
}
```
2. 使用css样式
在el-upload组件中添加一个span元素,用于显示文件名。然后,通过css样式控制该span元素的宽度和文本溢出显示省略号,鼠标悬停在span上时显示全部的文件名。
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:limit="1"
>
<el-button size="small" type="primary">点击上传</el-button>
<span class="file-name">{{ fileName }}</span>
</el-upload>
```
```css
.file-name {
max-width: 100px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-name:hover {
max-width: none;
overflow: visible;
white-space: normal;
}
```
element ui el-upload中 http-request传参数
在element ui el-upload中,http-request可以传递一个data参数,该参数是一个对象,包含了上传文件的相关信息,例如文件名、文件类型、文件大小等。在uploadHttpRequest方法中,可以通过访问data对象的属性来获取这些信息,从而进行后续的处理。例如,可以通过data.name获取上传文件的文件名。具体的使用方法可以参考element ui官网提供的文档和示例代码。