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自定义上传头像组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
最新评论