vue自定义上传头像组件功能

 更新时间:2024年01月17日 15:23:35   作者:@mimin  
这篇文章主要介绍了vue自定义上传头像组件功能,介绍了与一般上传组件的区别,通过实例代码介绍了上传图片组件的方法,需要的朋友可以参考下

1.展示效果

 1.1 效果图

 以上是没有上传的页面,以下是上传后鼠标放上去的效果

1.2 效果图

2.与一般上传组件的区别

 与饿了么上传组件主要区别在于只会在一个图像占位符上操作

3.上传图片组件

以下是上传图片组件代码内容

<template>
  <div class="account-avatar">
    <el-upload class="avatar-uploader" :action="uploadFileUrl" :show-file-list="false" :headers="headers" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <i v-if="imageUrl" class="el-icon-plus avatar-uploader-icon iconClass"></i>
    </el-upload>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      certificateImg: [],
      imageUrl: '',
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
          headers: {
              Authorization: "Bearer " + getToken()
          },
    }
  },
  mounted() {
    this.imageUrl = this.imgUrl
  },
  methods: {
    handleAvatarSuccess(res, file) {
      const fileName = file.name
      this.imageUrl =  file.response.url
      this.$emit('fileUrl', this.imageUrl)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG || (isPNG && isLt2M)
    }
  }
}
</script>
<style >
.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: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.iconClass{
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}
.iconClass:hover{
  color: #fbfbfb;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0.5;
  background-color: #7a7979;
}
</style>

4.引用组件

引用组件内容代码

//vue中template部分
<el-form-item prop="issueCardPic" label-width="0">
      <ImagesUpdate :imgUrl="form.issueCardPic" class="avatar-uploader"
       @fileUrl="avatorUPload"></ImagesUpdate>
</el-form-item>
//vue中script部分
import ImagesUpdate from "@/views/components/imagesUpdate"; //附件组件的地址
export default {
    data(){
        return{
            form:{}
            ...
            }
       },
    components:{
        ImagesUpdate
    },
    methods:{
        avatorUPload(){
        //上传后将地址塞入表单字段
            this.$set(this.form, 'issueCardPic', val)
            },
       }
}

到此这篇关于vue自定义上传头像组件的文章就介绍到这了,更多相关vue自定义上传头像组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3中是如何实现数据响应式示例详解

    Vue3中是如何实现数据响应式示例详解

    这篇文章主要介绍了Vue3中是如何实现数据响应式示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 在 Vue 应用中使用 Netlify 表单功能的方法详解

    在 Vue 应用中使用 Netlify 表单功能的方法详解

    Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。这篇文章主要介绍了在 Vue 应用中使用 Netlify 表单功能,需要的朋友可以参考下
    2019-06-06
  • 详解基于vue的服务端渲染框架NUXT

    详解基于vue的服务端渲染框架NUXT

    这篇文章主要介绍了Nuxt之vue服务端渲染,NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 基于vue实现多引擎搜索及关键字提示

    基于vue实现多引擎搜索及关键字提示

    这篇文章主要为大家详细介绍了基于vue实现多引擎搜索及关键字提示的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue+echart 展示后端获取的数据实现

    Vue+echart 展示后端获取的数据实现

    本文主要介绍了Vue+echart 展示后端获取的数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • vue中datepicker的使用教程实例代码详解

    vue中datepicker的使用教程实例代码详解

    这篇文章主要介绍了vue-datepicker的使用,本文通过实例代码大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue.js实现一个todo-list的上移下移删除功能

    Vue.js实现一个todo-list的上移下移删除功能

    这篇文章主要介绍了Vue.js实现一个todo-list的上移下移删除功能,需要的朋友可以参考下
    2017-06-06
  • vue 2.0封装model组件的方法

    vue 2.0封装model组件的方法

    本篇文章主要介绍了vue 2.0封装model组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue表格(table)计算总计方式

    vue表格(table)计算总计方式

    这篇文章主要介绍了vue表格(table)计算总计方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue2.x Todo之自定义指令实现自动聚焦的方法

    Vue2.x Todo之自定义指令实现自动聚焦的方法

    我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点,而不是需要先手动点一下。这篇文章主要介绍了Vue 2.x Todo之自定义指令实现自动聚焦,非常具有实用价值,需要的朋友可以参考下
    2019-01-01

最新评论