基于ElementUI的el-upload组件二次封装_elementui 二次封装upload-程序员宅基地

技术标签: 自定义上传  公用组件  upload  项目总结  elementui  

大家好,我是小佑@小佐 https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页。
前言:开发工作中我们都会遇到图片上传的问题,虽说ElementUI已有提供图片上传的组件,但我们用到图片上传的地方肯定不止一处的,并且框架自带的组件并不能完全满足我们的需求,为此我对原有组件做了二次封装,做到一次封装,到处使用!
直接上代码:

组件:

**uploadImg.vue**
<template>
  <div>
    <el-upload :disabled="idCardIsUpload" class="avatar-uploader" action="" list-type="picture" :show-file-list="false" :http-request="diyRequest">
      <el-image v-if="idCardImgUrl" :src="idCardImgUrl" name="idCardImgUrl" class="avatar" @error="imgLoadError"></el-image>
      <el-progress style="margin: 5px;" :width='70' v-else-if="idCardIsUpload" type="circle" :percentage="idCardUploadPercentage"></el-progress>
      <div v-else class="div-plus">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      idCardImgUrl: '',
      idCardIsUpload: false,
      idCardUploadPercentage: 0,
      errorImgUrls: [],
    }
  },
  props: {
    
  	/*可以在使用组件的时候传入一个支持上传的图片格式的数组进来,不传默认default数组*/
    supportType: {
    //支持上传文件的格式
      default: () => ['image/jpeg', 'image/jpg', 'image/png'],
      type: Array
    }
  },
  methods: {
    
  	/*父组件执行的方法*/
    setEditImg(path) {
    
      this.idCardImgUrl = path ? path : ''
    },
    /*自定义上传的方法*/
    diyRequest(param) {
    
      /*对上传图片的大小和格式校验*/
      const isLt10M = param.file.size / 1024 / 1024 < 4
      if (this.supportType.indexOf(param.file.type) == -1) {
    
        let supportType = this.supportType
        let msg = ''
        supportType.map(res => {
    
          msg += res.substring(6) + '/'
        })
        let newMsg = msg.slice(0, (msg.length) - 1)
        this.$Message('error', `请上传正确的图片格式!支持的格式有:` + newMsg)
        return
      }
      if (!isLt10M) {
    
        this.$Message('error', '上传图片大小不能超过4MB哦!')
        return
      }
      const fileObj = param.file
      const form = new FormData()
      form.append('file', fileObj)
      let callback = (progress) => {
    
        this.idCardIsUpload = true
        this.idCardUploadPercentage = progress
      }
      /*走后台接口,这里自行换成自己的api*/
      this.$api.addUploadImg(form, callback).then(res => {
    
        this.idCardIsUpload = false
        this.idCardUploadPercentage = 0
        if (res.code == 200) {
    
          this.idCardImgUrl = res.data.basePath + res.data.url
          /*成功之后将图片路径暴露给父组件去显示图片*/
          this.$emit('setCardPic', res.data.url)
        } else {
    
          this.$Message('error', res.message)
        }
      })
    },
    /*当图片显示失败的时候,我会重复10次赋值图片,成功显示就退出,还是失败就会显示失败*/
    imgLoadError(error) {
    
      let isExist = false
      const src = error.path[0].src.split('?')[0]
      if (this.errorImgUrls.length == 0) {
    
        this.errorImgUrls.push({
     'src': src, 'number': 1 })
      }
      for (let i = 0; i < this.errorImgUrls.length; i++) {
    
        if (src === this.errorImgUrls[i].src) {
    
          isExist = true
          while (this.errorImgUrls[i].number < 10) {
    
            console.log('我在重复赋值...')
            this.errorImgUrls[i].number++
            const timestamp1 = Date.parse(new Date())
            this[error.path[0].name] = src + '?t=' + timestamp1
          }
        }
      }
      if (!isExist) {
    //首次上传(不在错误数组图片中,需要执行循环三次赋值)
        this.errorImgUrls.push({
     'src': src, 'number': 1 })
        this.imgLoadError(error)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.div-plus {
    
  width: 174px;
  height: 174px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<style lang="scss">
.avatar-uploader .el-upload {
    
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    
  border-color: #409eff;
}
.avatar-uploader-icon {
    
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  text-align: center;
}
.avatar {
    
  width: 120px;
  height: 120px;
  display: block;
}
</style>

使用:

/*导入组件*/
import uploadImg from '@/components/uploadImg'
/*组件注册*/
export default {
    
	components: {
     uploadImg },
	data(){
    
		imgpath: '',
	},
	methods:{
    
		/*执行uploadImg组件报出来的事件,path就是显示图片的路径*/
		setCardPic(path, pic) {
    
	      this.form[pic] = path
	    },
	    /*详情的时候设定显示图片的路径 setEditImg是uploadImg组件提供的方法 imgpath是子组件的ref属性(看使用的组件)*/
	    this.$refs.imgpath.setEditImg('')
	}
}

<template>
<el-form-item label="广告图片:" prop="imgpath">
 	<uploadImg @setCardPic="setCardPic($event,'imgpath')" ref="imgpath"></uploadImg>
  	<span style="font-size: 12px;color: #606266;">只能上传jpg/png/jpeg文件,且不超过4MB</span>
</el-form-item>
</template>

效果:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

介绍完毕!使用有问题或不懂的地方评论区见吧
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Smell_rookie/article/details/113173358

智能推荐

约瑟夫环各种实现方法的总结_约瑟夫环代码实现-程序员宅基地

文章浏览阅读3.7k次,点赞2次,收藏7次。约瑟夫问题约瑟夫问题(有时也称为约瑟夫斯置换,是一个出现在计算机科学和数学中的问题。在计算机编程的算法中,类似问题又称为约瑟夫环。又称“丢手绢问题”.)一般形式NN个人围成一圈,从第一个开始报数,第MM个将淘汰,退出圈外,重复上述过程nn-11次,最后剩下一个,最后留下来的人获胜。求出最后获胜者的编号。 例如NN=66,MM=44,被杀掉的顺序是:44,22,11,33,66,55 获胜者便是5_约瑟夫环代码实现

就这样,我只用一天就开发出了一款APP_一天做一个软件厉不厉害-程序员宅基地

文章浏览阅读1.4w次,点赞9次,收藏58次。一个人花一天时间就能开发出一个Android、iOS双平台的APP,一起来看看是怎么实现的_一天做一个软件厉不厉害

linux C语言实现文件锁之flock_linux flock c 语言-程序员宅基地

文章浏览阅读9.9k次。一:flock函数特点:1.flock只能加全局锁。2.当一个进程用flock给一个文件加锁时,用另一个进程再给这个文件加锁,它会阻塞或者也可以返回加锁失败(可以自己设置)。3.当给一个文件加fcntl的独占锁后,再给这个文件加flock的独占锁,其会进入阻塞状态。4.当给一个文件加flock的独占锁后,用fcntl去获取这个锁信息获取不到,再用fcntl仍然可以给文件加锁。5_linux flock c 语言

强制Edge浏览器以深色模式渲染网页_edge 网页颜色渲染-程序员宅基地

文章浏览阅读4.1k次,点赞10次,收藏8次。强制Edge浏览器以深色模式渲染网页_edge 网页颜色渲染

linux 安装nginx cc1: all warnings being treated as errors解决办法_linux 安装cc1-程序员宅基地

文章浏览阅读7.2k次,点赞8次,收藏9次。进入nginx文件夹下的objs里面有个Makefilevim Makefile进去编辑看到将CFLAGS = -pipe -O -W -Wall -Wpointer-arith -Wno-unused -Werror -g后的 -Werror -g 去掉 变成CFLAGS = -pipe -O -W -Wall -Wpointer-arith -Wno-unused保存退出 重新make 即可..._linux 安装cc1

C3P0工具类-程序员宅基地

文章浏览阅读775次。文件命名必须为c3p0-config.xml&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;c3p0-config&gt; &lt;default-config&gt; &lt;property name="driverClass"&gt;com.mysql.jdbc.Driver&lt;/property&am_c3p0工具类

随便推点

task_structde(PCB)的结构剖析_struct desc_struct ldt[3];-程序员宅基地

文章浏览阅读2.6k次。进程是处于执行期的程序以及它所管理的资源(如打开的文件、挂起的信号、进程状态、地址空间等等)的总称。注意,程序并不是进程,实际上两个或多个进程不仅有可能执行同一程序,而且还有可能共享地址空间等资源。每一个进程都有一个进程描述符,具体是task_struct结构体存储相关的信息,task_struct就是我们通常所说的PCB(进程控制块,控制进程的唯一手段)。_struct desc_struct ldt[3];

Android 关于佳博和汉印蓝牙热敏打印机开发_android 实现便携式热敏打印机-程序员宅基地

文章浏览阅读4.1k次。接上篇文章Android之BLE(低功耗)蓝牙开发,本篇文章针对上篇博文中提出的两款打印机的开发流程进行记录。首先不管时佳博打印机还是汉印打印机,都是先对他们各自的lib进行导入,如图:导入lib之后,一定要记得进行sync project。一切准备就绪后接着就是根据他们各自提供的文档说明进行开发。本文不做详细说明,下面先贴汉印的打印关键代码(他们家的比较简单):public v..._android 实现便携式热敏打印机

ERROR: Could not find a version that satisfies the requirement scipy (from versions: none)-程序员宅基地

文章浏览阅读6.5k次,点赞6次,收藏9次。问题:ERROR: Could not find a version that satisfies the requirement scipy (from versions: none)解决办法:检查一下源,看是否是http,如果是的话,改为https像下面的都是http,可能会出现这个错误,则改为https就行。清华: http://pypi.tuna.tsinghua.edu.cn/simple豆瓣: http://pypi.douban.com/simple/阿里: http://mirro_error: could not find a version that satisfies the requirement scipy (from v

resttemplate-程序员宅基地

文章浏览阅读103次。

C#如何调用阿里云短信接口_阿里短信接口 vsnet c#-程序员宅基地

文章浏览阅读2.7k次,点赞2次,收藏13次。第一步:登录阿里云管理控制台,短信管理,添加签名和设置模板第二步:申请AccessKey第三步:获得开发api的代码第四步:在VS中下载SDK并且添加引用第六步:复制阿里云Demo代码到VS中,以下提供一个C#的短信帮助类 /// <summary> /// 短信帮助类 /// </summary> public class SmsHelper { /// <summary>_阿里短信接口 vsnet c#

项目上总是有小红叉或者红色叹号以及不能被TomCat发布解决方案_tomcay工件有x-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏4次。项目上总是有小红叉或者红色叹号以及不能被TomCat发布解决方案 文章原创,转载请注明出处在项目名上总是有小红叉或者有一个红色的叹号,而项目内部的代码又没有错误。 解决方案:首先查看项目配置的JDK(JRE)版本是否正确,是否是电脑安装的JDK。 查看方法:window-preferences-搜索JRE-installed jres 如果不是,可以..._tomcay工件有x

推荐文章

热门文章

相关标签