【JavaScript源代码】vue封装组件之上传图片组件.docx

vue封装组件之上传图片组件 　　本文实例为大家分享了vue上传图片组件的封装具体代码，供大家参考，具体内容如下　　未上传状态　　上传状态　　其他状态(查看/删除)　　自定义组件文件名称 - 这里叫UploadImg.vue　　<template>　　  <div>　　    <el-form>　　      <!-- :on-change="uploadFile" -->　　      <el-upload　　        :limit="limit"   //最大允许上传个数　　        action　　        accept="image/*" //接受上传的　　      Vue.js 是一个流行的前端框架，用于构建用户界面。在 Vue 中封装组件是提高代码复用性和组织性的重要手段。本文将介绍如何封装一个用于上传图片的 Vue 组件，该组件支持多种状态，如未上传、上传中以及查看/删除图片等。 组件的模板部分（`<template>`）包含了一个 `el-form` 元素，它使用了 Element UI 的 `el-upload` 组件。`el-upload` 提供了文件上传的功能，并且可以通过设置各种属性来定制其行为。例如： 1. `:limit` 属性用于限制最多可上传的文件数量。 2. `action` 属性指定服务器端处理上传的URL。 3. `accept` 属性定义了接受的文件类型，这里是图片。 4. `:on-change` 事件监听器在文件状态改变时触发，通常用于处理文件上传过程中的状态更新。 5. `list-type` 设置文件列表的显示样式，这里设置为 "picture-card"，使得文件以卡片形式展示。 6. `:auto-upload` 控制是否在选择文件后立即上传，设置为 `false` 表示需要手动触发。 7. `:file-list` 属性用于预先填充已上传的文件列表。 8. `:on-exceed` 事件处理文件超出限制的情况。 9. `:on-preview` 在预览图片时触发。 10. `:on-remove` 当从列表中移除文件时触发。 11. `ref` 用于在 Vue 实例中通过 `$refs` 访问该组件。 12. `:class` 根据条件决定是否显示上传按钮，如果达到最大上传限制，会隐藏上传按钮。 13. `:disabled` 属性可以用来禁用上传功能，例如在查看模式下。 在模板中，还包含了一个 `el-dialog` 组件，用于展示预览图片的对话框。当点击已上传图片时，`dialogVisible` 属性设置为 `true`，显示对话框，用户可以查看大图。 在 `<script>` 部分，组件接收 `limit`（最大上传数量）、`fileList`（已上传文件列表）和 `disabled`（是否禁用上传）作为外部属性。组件的数据包括 `showUpload`（控制上传按钮的可见性）和 `dialogVisible`（控制预览图片对话框的可见性）。 此外，组件定义了一些方法，如 `handleRemove`（用于移除文件列表中的文件），`handlePictureCardPreview`（处理图片预览），`handleExceed`（处理文件数量超过限制的情况），以及可能存在的 `submitUpload` 方法（如果需要手动触发上传）。 组件还监听了 `fileList` 的变化，当文件数量达到 `limit` 时，隐藏上传按钮。这确保了组件在外部数据改变时能正确响应。 封装这样的上传图片组件，开发者可以方便地在项目中多次使用，只需要传递必要的参数和事件处理函数，即可实现一致的图片上传体验。通过这种方式，代码结构更清晰，维护也更加容易。