二次封装el-update组件(vue2.x)

小张不会撸码

于 2021-04-12 11:25:11 发布

阅读量513

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue element-ui vue组件

本文链接：https://blog.youkuaiyun.com/null1126/article/details/115616582

这篇博客主要介绍了在Vue2.x中如何对element-ui的el-upload组件进行二次封装，详细展示了单张图片上传的实现过程，包括Upload.vue组件的编写以及在项目中的引入和使用方法。多张图片上传的功能目前处于待更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、单张图片上传

组件 Upload.vue

<template>
  <div>
    <el-upload
      class="pic-uploader-component"
      action="上传地址"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
      :on-change="handleChange"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="value && !loading" :src="resourcesUrl + value" class="pic">
      <i v-if="!value && !loading" class="el-icon-plus pic-uploader-icon" />