vue自定義上傳頭像組件功能

更新時(shí)間：2024年01月17日 15:23:35 作者：@mimin

這篇文章主要介紹了vue自定義上傳頭像組件功能,介紹了與一般上傳組件的區(qū)別,通過(guò)實(shí)例代碼介紹了上傳圖片組件的方法,需要的朋友可以參考下

1.展示效果

1.1 效果圖

以上是沒(méi)有上傳的頁(yè)面，以下是上傳后鼠標(biāo)放上去的效果

1.2 效果圖

2.與一般上傳組件的區(qū)別

與餓了么上傳組件主要區(qū)別在于只會(huì)在一個(gè)圖像占位符上操作

3.上傳圖片組件

以下是上傳圖片組件代碼內(nèi)容

<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", // 上傳的圖片服務(wù)器地址
          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('上傳頭像圖片大小不能超過(guò) 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.引用組件

引用組件內(nèi)容代碼

//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)
            },
       }
}

到此這篇關(guān)于vue自定義上傳頭像組件的文章就介紹到這了,更多相關(guān)vue自定義上傳頭像組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: