scdky_bianyuanjiance2.0_ui/src/views/device/components/UploadPhoto.vue

<!-- 上传图片组件 -->
<template>
  <div class="photo-container">
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      accept=".png,.jpg"
      class="photo-uploader"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      :on-change="handleChange"
      :file-list="defaultArr"
    >
      <i slot="default" class="el-icon-camera-solid" />
      <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
        <img
          class="el-upload-list__item-thumbnail showImg"
          :src="file.url"
          alt=""
        >
        <span class="el-upload-list__item-actions">
          <!-- 预览大图 -->
          <span
            v-if="(photoInfo.url && photoInfo.size != 0)||file.size>0"
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in" />
          </span>
          <!-- 下载
            <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-download" />
          </span> -->
          <!-- 删除按钮 -->
          <span
            v-if="(photoInfo.url && photoInfo.size != 0)||file.size>0"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete" />
          </span>
        </span>
      </div>

    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    photoInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      defaultArr: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 网页加载完成后执行
      this.defaultArr = [{ name: this.photoInfo.name, url: this.photoInfo.url }]
    })
  },
  methods: {
    // 删除图片
    handleRemove() {
      // console.log('delflie', file)
      this.defaultArr = [{ name: this.photoInfo.name, url: undefined }]
      // 如果 photoInfo.url && photoInfo.size != 0 表示是后端已经保存过的数据，提交到父组件向后端发起删除请求
      if (this.photoInfo.url && this.photoInfo.size !== 0) {
      // 向父组件传值
        this.$emit('photoRemoved', this.photoInfo.name)
      } else {
        this.$emit('delphoto', this.photoInfo.name)
      }
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      // console.log('handlePictureCardPreview', file)
    },
    // 图片有改动
    handleChange(file, fileList) {
      // console.log('file', file)
      const fileSize = Number(file.size / 1024 / 1024)
      // console.log('fileSize', fileSize)
      if (fileSize > 1) {
        this.$message({
          message: '照片大小不能超过1MB',
          type: 'warning',
          offset: window.screen.height / 3
        })
        fileList.pop()
        return
      }
      if (this.photoInfo.url || fileList[0].url) {
        this.$message({
          message: '覆盖前一个文件',
          type: 'warning',
          offset: window.screen.height / 3
        })
      }
      fileList.splice(0, 1)
      // 向父组件传值
      this.$emit('photoChanged', file, this.photoInfo.name)
    }
  }
}
</script>

<style lang="scss">
  $photoSize: 100px;
  .photo-uploader {
    display: flex;
  }
  .el-upload-list {
    // border: 1px #f00 solid;
    display: block;
    width: $photoSize;
    height: $photoSize;
  }
  .el-upload--picture-card {
    display: block;
    width: $photoSize;
    height: $photoSize;
    line-height: $photoSize;
    overflow: hidden;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    width: $photoSize;
    height: $photoSize;
    overflow: hidden;
  }
  .showImg{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit:fill;
  }
</style>