Vue自定义上传文件组件：解决常见问题与示例代码

"Vue组件化开发中，作者在实际项目中遇到了使用第三方UI框架（如Element-UI，zp-ui，iview）的上传文件组件时出现的问题，如无法有效限制多选、手动控制上传列表失效等。为了解决这些问题并减少不必要的代码，作者决定封装一个简单且轻量级的Vue上传文件组件。该组件允许用户自定义上传列表，控制上传行为，并具有进度回调、成功和失败回调等功能。以下是对这个自定义上传组件的详细分析和介绍。 在封装组件时，首先我们需要了解Vue的基本组件开发流程，包括定义props、事件处理以及组件的模板结构。在这个示例中，我们看到`<my-upload>`组件接收一些关键属性： 1. `file-list`: 这个属性用于传递上传文件列表，可以用来展示已选择的文件，并在父组件中进行管理。 2. `action`: 指定文件上传的API接口地址。 3. `data`: 可以传递额外的数据，比如认证信息或其他需要与服务器交互的参数。 4. `on-change`: 当文件选择改变时触发的回调，用于更新文件列表。 5. `on-progress`: 在文件上传过程中触发，提供上传进度信息。 6. `on-success` 和 `on-failed`: 分别在文件上传成功或失败时触发，便于处理后续逻辑。 7. `multiple`: 是否支持多选文件，这里设置为true表示支持。 8. `limit`: 限制最多可以选择的文件数量。 9. `on-finished`: 上传全部完成时触发的回调。 父组件的模板部分展示了如何使用这个自定义上传组件。`<my-upload>`组件被包含在`<label>`中，提供了一个上传按钮。同时，通过`v-model`或者`:file-list`来同步父组件和子组件之间的文件列表状态。`<button>`用于触发上传操作，其点击事件`@click="upload"`调用父组件的方法来启动上传过程。 在`<script>`部分，引入了自定义组件`my-upload`，并注册到当前组件中。`data()`函数返回了`fileList`，这是一个空数组，用于存储用户选择的文件。`upload`方法可以在这里编写，负责调用子组件的上传功能，例如：`this.$refs.myUpload.submit()`。 这个自定义上传组件的优势在于可以根据项目的具体需求进行定制，避免了与现有UI框架的冲突，减少了不必要的样式和逻辑代码。同时，通过提供丰富的回调函数，使得文件上传的过程更加可控，可以方便地集成到项目中并与其他业务逻辑协同工作。在实际开发中，可以根据具体需求扩展这个组件，例如添加预览功能、文件类型检查、错误提示等。