el input 怎么拿文件
时间: 2025-03-27 19:16:28 浏览: 26
`el-input` 组件本身主要用于文本输入,并不适合直接用于文件上传。如果你想要实现文件选择功能,建议使用 `el-upload` 或者原生的 `<input type="file">` 标签。
不过如果你想在项目中结合 `el-input` 和 文件选择的功能,可以考虑将它们组合起来使用。例如:
```html
<template>
<div>
<!-- 使用 el-input 来显示选中的文件名 -->
<el-input v-model="fileName" placeholder="请选择文件"></el-input>
<!-- 隐藏的真实 file 输入框 -->
<input
ref="fileInput"
style="display:none;"
type="file"
@change="handleFileChange">
<!-- 触发文件选择按钮 -->
<el-button @click="$refs.fileInput.click()">选择文件</el-button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const fileName = ref('')
// 获取文件名称并更新到 input 中展示
function handleFileChange(event) {
const files = event.target.files;
if (files.length > 0){
// 更新绑定值为第一个文件的名字
fileName.value = files[0].name;
}
}
</script>
```
上述代码实现了点击“选择文件”按钮后会触发隐藏的文件选择框打开,在用户选择了文件之后,所选文件的名字会被回显到 `el-input` 上面供查看。
--
阅读全文
相关推荐


















