vue 自定义文件选择器组件- 原生 input实现

在 vue 中使用原生 input 标签实现文件选择，支持多选，封装成一个组件

介绍

自定义的文件选择器组件，封装一个隐藏的<input type="file">元素，并通过一个按钮来触发文件选择操作。

UploadFiles.vue

<template><div class="upload-files"><input type="file" ref="fileInput" style="display: none" @change="handleFileChange" multiple /><el-button size="small" @click="triggerFileInput">选择文件</el-button></div>
</template><script>
export default {methods: {triggerFileInput() {this.$refs.fileInput.value = null; // 重置input的值this.$refs.fileInput.click();},handleFileChange(event) {const files = event.target.files;const fileArray = [];if (files.length > 0) {for (let i = 0; i < files.length; i++) {fileArray.push(files[i]);}this.$emit('files-selected', fileArray);}return fileArray;}}
}
</script><style scoped></style>

代码结构分析

模板部分 (<template>)

• 包含一个隐藏的文件输入框 (display: none)
• 一个可见的"选择文件"按钮（使用Element UI的el-button组件）

脚本部分 (<script>)

包含两个主要方法：

1. triggerFileInput() 方法：

• 重置文件输入框的值（清除之前的选择）
• 通过编程方式触发隐藏文件输入框的点击事件

1. handleFileChange(event) 方法：

• 当用户选择文件后触发
• 将FileList对象转换为数组
• 通过$emit向父组件传递选择的文件数组

工作原理

1. 用户点击"选择文件"按钮
2. 触发隐藏的<input type="file">的点击事件
3. 系统原生文件选择对话框弹出
4. 用户选择文件后，handleFileChange方法处理文件
5. 将文件数组通过自定义事件files-selected传递给父组件

组件特点

• 支持多文件选择（multiple属性）
• 重置功能：每次点击都会清空之前的选择
• 事件驱动：通过Vue的自定义事件与父组件通信
• UI封装：隐藏了原生文件输入框的不美观样式

使用示例

父组件可以这样使用：

<template><upload-files @files-selected="handleFilesSelected"></upload-files>
</template><script>
export default {components: { uploadFiles },methods: {handleFilesSelected(files) {// 在这里处理接收到的文件数组console.log('选择的文件：', files);}}
}
</script>