pbl-app/src/views/course/components/ImageComponent.vue

<template>
  <div class="imgBox">
    <div @click="addImg($event)" class="imgCss">
      <img src="../../../assets/images/course/imageUpload.png" alt="" />
      <input type="file" accept="image/*" style="display: none" @change="beforeUpload($event)" />
    </div>
    <div class="imgList">
      <div v-for="(item, index) in imgList" :key="index" class="imgItem">
        <div class="itemImg" @click="previewImg(item)">
          <img :src="item" alt="" />
        </div>
        <div class="deleteImg" @click="deleteItem(item)">
          <img src="../../../assets/images/course/delete.png" alt="" />
        </div>
      </div>
    </div>
    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox"><img :src="require('../../../assets/images/loading.gif')" />上传中，请稍后</div>
        <el-progress :text-inside="true" :stroke-width="20" :percentage="progress" style="width: 80%"></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      // imgList: []
      proVisible: false,
      progress: 0
    }
  },
  methods: {
    previewImg(url) {
      this.$hevueImgPreview(url)
    },
    addImg(e) {
      var el = e.currentTarget
      el.getElementsByTagName('input')[0].click()
      e.target.value = ''
    },
    deleteItem(i) {
      const a = JSON.parse(JSON.stringify(this.imgList))
      a.splice(a.indexOf(i), 1)
      // this.imgList.splice(this.imgList.indexOf(i), 1)
      this.$emit('update:imgList', a)
      this.$forceUpdate()
    },
    beforeUpload(event) {
      var file = event.target.files[0]
      var credentials = {
        accessKeyId: 'AKIATLPEDU37QV5CHLMH',
        secretAccessKey: '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'
      } // 秘钥形式的登录上传
      window.AWS.config.update(credentials)
      window.AWS.config.region = 'cn-northwest-1' // 设置区域
      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' }}) // 选择桶
      var _this = this
      _this.progress = 0
      _this.proVisible = true
      if (file) {
        var params = {
          Key:
            file.name.split('.')[0] +
            new Date().getTime() +
            '.' +
            file.name.split('.')[file.name.split('.').length - 1],
          ContentType: file.type,
          Body: file,
          'Access-Control-Allow-Credentials': '*',
          ACL: 'public-read'
        } // key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true
        }
        bucket
          .upload(params, options)
          .on('httpUploadProgress', function(evt) {
            // 这里可以写进度条
            _this.progress = parseInt((evt.loaded * 80) / evt.total)
          })
          .send(function(err, data) {
            _this.progress = 100
            _this.mediaLoading = false
            setTimeout(() => {
              _this.proVisible = false
            }, 1000)
            if (err) {
              // _this.$message.error('上传失败')
            } else {
              _this.$toast({
                message: '上传成功',
                type: 'success'
              })
              const a = JSON.parse(JSON.stringify(_this.imgList))
              a.push(data.Location)
              _this.$emit('update:imgList', a)

              // _this.getImage(_this.imgList)
            }
          })
      }
    },
    getImage(imageList) {
      this.$emit('getImage', imageList)
    }
  }
}
</script>

<style lang="scss" scoped>
.imgBox {
  margin: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  .imgCss {
    width: 50px;
    height: 50px;
    margin-left: 0 0.3rem;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .imgList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    .imgItem {
      position: relative;
      width: 50px;
      margin: 0 10px 10px 0;
      .itemImg {
        width: 50px;
        height: 50px;
        z-index: 1;
        > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .deleteImg {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .mask {
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .progressBox {
    width: 85%;
    max-width: 300px;
    height: 100px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 6px 1px #bfbfbf;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .progressBox .lbox {
    height: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  .progressBox .lbox img {
    width: 10px;
    margin-right: 10px;
  }

  /deep/ .progressBox {
    .el-progress-bar__outer {
      background-color: #d1dfff !important;
      height: 20px !important;
    }
  }
}
</style>