上传图片组件

最新推荐文章于 2024-05-09 18:58:22 发布

淑子啦

最新推荐文章于 2024-05-09 18:58:22 发布

阅读量30

点赞数

文章标签： vue.js javascript ecmascript vue 前端笔记学习

本文链接：https://blog.csdn.net/weixin_45392204/article/details/132319737

版权

<template>
  <div class="upload-image">
    <div v-if="imageList.length > 0 || isEdit" class="image-list">
      <el-upload
        :show-file-list="false"
        :on-change="handleAvatarSuccess"
        :auto-upload="false"
        :multiple="true"
        action
        class="image-item"
      >
        <div class="upload-image">
          <i class="el-icon-plus" />
        </div>
      </el-upload>
      <div v-for="(item, index) in imageList" :key="item.uid" class="image-item" >
        <el-image
          :src="item.url"
          :preview-src-list="imageList.map(value => value.url)"
          class="video"
          fit="contain"
        />
        <div class="del-btn-icon" @click="deleteImage(index)"><i class="iconfont-ziranziyuan iconshanchu1" /></div>
      </div>
    </div>
    <div v-else>无</div>
  </div>
</template>

<script>
export default {
  name: 'UploadImage',
  props: {
    isEdit: {
      type: Boolean,
      default: true
    },
    tpdz: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      imageList: []
    }
  },
  created() {
    this.imageList = [...this.tpdz]
  },
  methods: {
    handleAvatarSuccess(file) {
      const imageType = ['svg', 'jpg', 'png', 'pdf', 'gif', 'jpeg', 'bmp', 'dwg', 'dxf', 'dwt']
      const fileType = file.name.split('.')[1]
      if (!imageType.includes(fileType)) {
        this.$mymess.warning('只支持上传图片')
        return false
      } else if (this.imageList.find(item => item.name === file.name)) {
        this.$mymess.warning(file.name + '文件重复')
        return false
      }
      const imageObj = { ...file }
      imageObj.url = URL.createObjectURL(file.raw)
      this.imageList.push(imageObj)
      this.$emit('changeTPDZ', this.imageList)
    },
    // 删除照片
    deleteImage(index) {
      this.imageList.splice(index, 1)
      this.$emit('changeTPDZ', this.imageList)
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-image {
  width: 100%;
  .image-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .image-item {
      display: inline-block;
      margin-bottom: 12px;
      height: 126px;
      width: calc((100% - 48px)/4);
      margin-right: 16px;
      text-align: center;
      line-height: 124px;
      font-size: 32px;
      color: #C0C4CC;
      background-color: #F2F6FC;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      position: relative;
      /deep/.el-upload {
        width: 100%;
      }
      &:nth-child(4n) {
        margin-right: 0;
      }
      .video {
        width: 100%;
        height: 100%;
      }
      &:hover {
        .del-btn-icon {
          display: block;
        }
      }
      .play-btn-icon {
        width: 24px;
        height: 24px;
        line-height: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #FFFFFF;
        .iconfont-ziranziyuan {
          font-size: 24px;
        }
      }
      .del-btn-icon {
        display: none;
        cursor: pointer;
        position: absolute;
        width: 100%;
        height: 28px;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        font-size: 16px;
        line-height: 28px;
        color: #FFFFFF;
      }
    }
  }
}
</style>