vue2+ts+element UI 图片(头像)上传功能的组件封装

vue2+ts（typescript)+element UI 图片(头像)上传功能的组件封装

话不多说 先上效果图


以下是代码：

<template>
  <div>
    <el-upload
      ref="imageUpload"
      style="position:relative"
      :action="uploadAction"
      :headers="apiHeader"
      :on-success="handSuccess"
      :show-file-list="false"
      accept=".jpg,.jpeg,.png
      ,.JPG,.JPEG,.PNG"
      :before-upload="beforeAvatarUpload"
    >
      <div class="image-border">
        <el-image
          v-if="isUpload"
          style="width: 100%; height: 100%; positon:relative"
          :src="imageView + url"
          fit="fill"
        ></el-image>
        <i v-if="!isUpload" class="el-icon-plus imageUpload-plus"></i>
        <i
          v-if="isUpload"
          class="el-icon-search image-icon1"
          @click.stop="preView"
        ></i>
        <i
          v-if="isUpload"
          class="el-icon-delete image-icon2"
          @click.stop="delImage"
        ></i>
      </div>
      <div class="right-text" v-if="showLog">
        <ul>
          <li>建议上传 344 * 208分辨率的照片</li>
          <li>仅支持jpg、jpeg、png 格式</li>
          <li>图片不大于5MB</li>
        </ul>
      </div>
    </el-upload>
    <el-dialog title="预览" :visible.sync="visible" width="600px">
      <el-image
        style="width: 100%; height: 100%"
        :src="imageView + url"
        fit="fill"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { carApi } from "../../../api/car-api";
@Component({
  name: "Upload"
})
export default class extends Vue {
  @Prop({ default: "" }) carImageUrl!: any;
  @Prop({ default: true }) showLog!: any;
  // 是否已上传
  private isUpload: boolean = false;
  // 存放图片
  private imageList: Array<any> = [];
  // 略缩图url
  private url: string = "";
  // 预览显示
  private visible: boolean = false;
  // //是否显示提示语
  // private showLog: boolean = true;
  // 上传地址
  get uploadAction(){
    return (this as any).$baseApi.uploadUrl;
  }
  // 图片访问地址
  get imageView() {
    return (this as any).$baseApi.loadUrl;
  }
  // 上传头
  private apiHeader: any = {
    scale: 0.5
  };

  @Watch("carImageUrl")
  carImageUrlChange(nval: string) {
    this.isUpload = this.carImageUrl ? true : false;
    this.url = this.carImageUrl;
  }
  // 上传事件
  private handSuccess(res: any, file: any) {
    if (!res.success) {
      (this as any).msgWarn(res.message);
      return;
    }

    window.setTimeout(()=>{
      this.url = res.data.url;
      this.isUpload = true;
    },750);
    // this.imageList.push(file)
  }
  // 预览大图
  private preView() {
    this.visible = true;
  }
  // 限制大小
  private beforeAvatarUpload(file: any) {
    //限制图片格式为jpg / png
    const isJPG = file.type === ('image/png'||'image/jpg'||'image/jpeg'||'image/PNG'||'image/JPG'||'image/JPEG');
    const isLt2M = file.size / 1024 / 1024 < 5; //限制图片大小
    if (!isJPG) {
      this.$message.error('上传图片只能是 JPG JPRG PNG格式!');
      return false;
    }
    if (!isLt2M) {
      this.$message.error("上传图片大小不能超过 5MB!");
      return false;
    }
  }
  // 删除图片
  private async delImage() {
    if (this.carImageUrl) {
      this.url = "";
      this.isUpload = false;
    } else {
      let param = {
        fileId: this.url
      };
      let upload: boolean = true;
      let res = await carApi.delCarImage(param, upload);
      if (res.success) {
        (this as any).msgSuccess(res.message);
        this.url = "";
        this.isUpload = false;
      } else {
        (this as any).msgError(res.message);
      }
    }
  }
}
</script>

<style scoped>
.image-border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 100px;
  border: 1px dashed #afb1b3;
  cursor: pointer;
}
.image-border:hover i {
  display: block;
}
.imageUpload-plus {
  font-size: 30px;
}
.right-text {
  text-align: left;
  position: absolute;
  left: 170px;
  width: 255px;
  top: -15px;
  font-family: "ArialMT", "Arial";
  font-weight: 400;
  color: #aeaeae;
}
.image-icon1 {
  position: absolute;
  left: 30%;
  font-size: 25px;
  color: #aeaeae;
  display: none;
}
.image-icon2 {
  position: absolute;
  left: 60%;
  font-size: 25px;
  color: #aeaeae;
  display: none;
}
</style>