vue文件上传组件

### Vue 文件上传组件的实现与使用 #### 1. 使用 Vue 3 构建文件上传组件的基础逻辑 在 Vue 3 中，可以通过监听 `input` 类型为 `file` 的原生 DOM 元素来获取用户选择的文件。这种基础方式适用于轻量级场景[^1]。 ```html <template> <div> <label for="fileInput">选择文件：</label> <input type="file" id="fileInput" @change="handleFileChange"> </div> </template> <script> export default { methods: { handleFileChange(event) { const files = event.target.files; console.log('Selected Files:', files); } } }; </script> ``` 此代码展示了如何通过绑定 `@change` 事件捕获用户的文件输入操作，并将其存储到变量中以便后续处理[^1]。 --- #### 2. 结合第三方库增强功能 为了提供更丰富的用户体验，通常会引入成熟的 UI 库（如 Element Plus）。Element Plus 提供了开箱即用的 `el-upload` 组件，能够轻松实现文件上传、预览以及进度条等功能[^2]。 以下是基于 Vue 3 和 Element Plus 的文件上传组件示例： ```vue <template> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> <el-button type="primary">点击上传</el-button> <template #tip> <div class="el-upload__tip">仅允许上传 jpg/png 文件，且不超过 500kb。</div> </template> </el-upload> </template> <script> import { ref } from 'vue'; export default { setup() { const fileList = ref([]); const handlePreview = (file) => { console.log('Preview File:', file); }; const handleRemove = (file, fileList) => { console.log('Removed File:', file); }; const beforeUpload = (file) => { const isJPGorPNG = ['image/jpeg', 'image/png'].includes(file.type); const isLt500K = file.size / 1024 < 500; if (!isJPGorPNG) { alert('仅支持 JPG/PNG 格式的文件！'); return false; } if (!isLt500K) { alert('文件大小不得超过 500KB！'); return false; } return true; }; const handleExceed = () => { alert('最多只能上传三个文件！'); }; return { fileList, handlePreview, handleRemove, beforeUpload, handleExceed }; } }; </script> ``` 该示例实现了文件上传的核心功能，包括但不限于文件验证、数量限制和回调函数的支持。 --- #### 3. 将文件列表传递给父组件 如果需要将子组件中的文件列表同步至父组件，则可通过自定义事件完成这一目标[^4]。 以下是一个完整的父子组件通信案例： ##### 子组件 (`UploadCommon.vue`) ```vue <template> <el-upload v-bind="$attrs" :auto-upload="false" :on-change="handleChange" :file-list="internalFileList"> <el-button>选择文件</el-button> </el-upload> </template> <script> import { ref, watchEffect } from 'vue'; export default { props: { outFileList: Array }, emits: ['update:outFileList'], setup(props, { emit }) { const internalFileList = ref([]); watchEffect(() => { internalFileList.value = [...props.outFileList]; }); function handleChange(file, fileList) { internalFileList.value = fileList.map(f => f.raw); // 获取原始文件对象 emit('update:outFileList', internalFileList.value); } return { internalFileList, handleChange }; } }; </script> ``` ##### 父组件调用 ```vue <template> <el-form> <el-form-item label="相关附件："> <upload-common :out-file-list="fileList" @update:outFileList="updateFileList"> </upload-common> </el-form-item> </el-form> </template> <script> import UploadCommon from './components/UploadCommon.vue'; import { ref } from 'vue'; export default { components: { UploadCommon }, setup() { const fileList = ref([]); function updateFileList(newFiles) { fileList.value = newFiles; console.log('Updated File List:', fileList.value); } return { fileList, updateFileList }; } }; </script> ``` 在此设计中，子组件负责收集并筛选文件，而父组件则接收更新后的文件列表用于进一步业务逻辑处理[^4]。 --- #### 总结 以上分别介绍了三种不同层次的 Vue 文件上传组件实现方案： 1. 基于原生 HTML 输入框的简易版； 2. 集成 Element Plus 的高级版本； 3. 支持双向绑定的复杂交互模式。 这些方法可以根据具体需求灵活选用，从而满足多样化的应用场景。 ---