16.el-upload二次封装，多头像上传组件

上传对应的单张图片，没上传图片前默认显示不同的图片，demo源码地址：gitee.com/mayxue/vue2…

1.效果：

2.二次封装的组件：

<template>
  <!-- 单张图片上传组件 -->
  <section
    :style="{
        width: width,
        height: height,
        display: 'inline-block',
        marginRight: '20px',
        marginBottom: '20px',
	}"
  >
    <el-upload
      :style="{ width: width, height: height }"
      class="avatar-uploader"
      action
      :show-file-list="false"
      :auto-upload="false"
      list-type="picture-card"
      :on-change="handleAvatarSuccess"
    >
      <img
        v-if="imageUrl"
        :src="imageUrl"
        :width="width"
        :height="height"
        style="object-fit: cover;"
      />
      <img
        v-else
        :src="require('./image/' + img)"
        :width="width"
        :height="height"
        style="border-radius: 5px"
      />
    </el-upload>
    <b
      class="text-info2"
      style="text-align: center; display: block"
      v-if="name != ''"
    >点击上传{{ name }}</b>
  </section>
</template>

<script>
export default {
  props: {
    index: {
      type: Number
    },
    name: {
      type: String
    },
    img: {
      type: String
    },
    imageUrl: {
      type: String
    },
    width: {
      default: "300px"
    },
    height: {
      default: "180px"
    },
  },
  computed: {},
  created() {},
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      imgData: {}
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      let url = URL.createObjectURL(res.raw);
      this.$emit(
        "handleAvatarSuccess",
        this.index,
        url
      );

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-upload {
  border: none;
}
</style>

3.在页面中的调用：

<template>
  <div class="imgUpload">
    <el-card :body-style="{ padding: '20px', minHeight: 'calc(100vh - 100px)' }">
      <el-form class="my-form" size="small" label-width="130px">
        <el-form-item label="上传单张图片：">
          <div class="imgItem">
            <imgUpload
              v-for="(item,index) in imgList"
              :key="index"
              :index="index"
              :img="item.imgDefalut"
              :name="item.name"
              :imageUrl="item.imgUrl"
              @handleAvatarSuccess="handleAvatarSuccess"
            ></imgUpload>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { imgUpload } from "@/components/index";
export default {
  name: "imgUploadList",
  components: { imgUpload },
  data() {
    return {
      imgUrl: "",
      imgList: [],
    };
  },
  methods: {
    handleAvatarSuccess(index,raw) {
      this.imgList[index].imgUrl = raw;
      console.log("this.imgList[index].imgUrl", this.imgList[index].imgUrl);
    },
  },
  created() {
    for (let i = 1; i < 6; i++) {
      this.imgList.push({
        imgDefalut: `uploadImg${i}.png`,
        name: `图片${i}`,
        imgUrl: ""
      });
    }
  }
};
</script>