iView上传组件：实现手动上传及功能解析

"iView 是一个专为 PC 界面的中后台业务设计的高质量开源 UI 组件库，提供了丰富的功能和友好的 API。在本文中，我们将关注 iView 的上传组件，特别是如何实现手动上传功能。在实际项目中，我们可能需要对上传文件进行格式检查、预览、删除等操作，这些功能可以通过 iView 的上传组件轻松实现。" iView 的上传组件允许用户选择文件并进行上传，同时提供了多种自定义选项以满足不同需求。以下是一些关键知识点： 1. **手动上传功能**：默认情况下，iView 的上传组件会在用户选择文件后立即发起上传请求。但有时我们需要在上传前执行一些额外的操作，比如验证文件类型或大小。通过设置 `before-upload` 属性，我们可以指定一个回调函数来控制是否允许上传。当这个函数返回 `false` 或者返回一个 Promise 并被 reject 时，上传会被阻止。 2. **文件格式检查**：在 `before-upload` 回调中，我们可以检查文件的类型和大小，确保它们符合我们的业务需求。例如，我们可以检查文件的扩展名，或者使用 `FileReader` API 来读取文件内容进行更复杂的检查。 3. **显示文件列表**：`show-upload-list` 属性可以用来控制是否显示已选文件的列表。在示例代码中，设置为 `false` 隐藏了列表，但通常我们可能希望用户能看到他们选择了哪些文件。 4. **删除文件功能**：在文件列表中，我们可以通过 `v-for` 循环遍历每个文件，并添加一个删除按钮。点击按钮时，可以通过 `delectFile` 方法删除对应的文件。删除操作通常需要与服务器进行交互，以确保数据的一致性。 5. **上传成功回调**：`on-success` 回调会在文件上传成功后触发，参数包括响应数据、文件对象和文件索引。这为我们提供了处理上传结果的机会，比如更新数据库或显示成功消息。 6. **自定义上传按钮**：在示例中，`Upload` 组件包裹了一个 `Button`，并且设置了 `type="ghost"` 和 `icon="ios-cloud-upload-outline"`，使得上传按钮看起来更加直观。`ref="upload"` 用于在 Vue 实例中通过 `$refs` 访问该组件，以便在其他地方触发上传。 7. **上传进度**：虽然示例中没有展示，但 iView 的上传组件还支持显示上传进度。通过 `on-progress` 回调，我们可以获取到上传进度的百分比，并将其显示给用户。 8. **批量上传**：`multiple` 属性启用多选文件功能，让用户一次可以选择多个文件进行上传。 9. **自定义上传动作**：`action` 属性定义了文件上传的 URL，可以是绝对路径或相对路径。如果需要自定义上传逻辑，可以使用 `customRequest` 属性，它接受一个函数，允许我们完全控制上传过程。 iView 的上传组件提供了强大的功能，使得在 Vue 项目中处理文件上传变得简单易行。通过配置不同的属性和监听事件，我们可以轻松定制上传行为，满足各种复杂的需求。在实际开发中，结合 iView 的官方文档（https://www.iviewui.com/components/upload），开发者可以更深入地了解和利用这个组件。