ngds-backend-ele/src/components/Upload/index.vue

<template>
  <div class="singleImageUpload2 upload-container">
    <el-upload
      v-show="uploaderShow"
      v-loading="uploaderLoading"
      class="image-uploader"
      :action="uploaderRequestUrl"
      name="file"
      :headers="uploaderHeaders"
      :data="uploaderFormData"
      :show-file-list="false"
      :before-upload="uploaderHandleBefore"
      :on-success="uploaderHandleSuccess"
      :disabled="uploaderDisabled"
      :style="isImgUpload ? `width:${width};min-height:${height};` : ''"
    >
      <template v-if="isImgUpload">
        <el-image
          v-if="uploaderImageUrl"
          :src="uploaderImageUrl"
          class="image-preview"
          fit="contain"
          :style="`width:${width};min-height:${height};display: block;`"
        ></el-image>
        <i
          v-else
          class="el-icon-plus uploader-icon"
          :style="`width:${width};height:${height};line-height:${height};`"
        />
      </template>
      <template v-else>
        <el-button type="primary">{{ uploadBtnTitle }}</el-button>
      </template>
    </el-upload>
    <template v-if="isImgUpload">
      <div v-show="!uploaderShow" class="image-show">
        <el-image :src="uploaderImageUrl" alt="" :width="width" :height="height"></el-image>
      </div>
    </template>

    <div class="previewImg">
      <el-button v-show="uploaderImageUrl" type="info" class="previewImgButton"  @click="previewImg">{{ $t('shop.imagePreview') }}</el-button>
    </div>
    <el-dialog append-to-body top="5vh" :visible.sync="dialogVisible" custom-class="custom-dialog">
      <div class="previewImage">
        <el-image width="60%" :src="uploaderImageUrl"  alt=""></el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/api/upload'
export default {
  name: 'Uploader',
  props: {
    isImgUpload: {
      type: Boolean,
      default: true
    },
    uploadBtnTitle: {
      type: String,
      default: '上传'
    },
    requestRoute: {
      type: String,
      required: true
    },
    defaultImageUrl: {
      type: String,
      default: null
    },
    uploaderSuccessCanChange: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      uploaderShow: true,
      uploaderLoading: false,
      uploaderFormData: {
        'uploadToken': ''
      },
      uploaderRequestUrl: process.env.VUE_APP_BASE_API + `/${this.requestRoute}`,
      uploaderHeaders: {
        'Device-Type': 'pc',
        'Suppress-Response-Code': '1',
        'Authorization': ''
      },
      uploaderDisabled: false,
      successImageUrl: null,
      uploaderImage: null,
      dialogVisible: false,
      uploadedImages: []
    }
  },
  computed: {
    uploaderImageUrl() {
      if (this.uploaderImage != null) {
        return this.uploaderImage
      }
      if (this.successImageUrl !== null) {
        return this.successImageUrl
      } else if (this.defaultImageUrl !== null) {
        // this.uploaderShow = false
        // this.uploaderDisabled = true

        // this.uploaderLoading = false
        return this.defaultImageUrl
      } else {
        return ''
      }
    }
  },
  watch: {
    defaultImageUrl(newVal, oldVal) {
      this.uploaderImage = newVal
      // console.log(oldVal)
    }
  },
  created() {
    console.log(this.uploaderImage)
  },
  methods: {
    previewImg(){
      this.dialogVisible = true;
    },

    uploaderHandleBefore() {
      const auth_token = localStorage.accessToken
      this.uploaderHeaders.Authorization = 'Bearer  ' + auth_token
      return new Promise((resolve, reject) => {
        getToken().then(response => {
          console.log(response)
          this.uploaderFormData.uploadToken = response.data
          resolve(true)
        }).catch(() => {
          reject(false)
        })
      })
    },
    uploaderHandleSuccess(response, file) {
      // console.log(response)
      if (response.success) {
        this.$message({
          message: 'Successful',
          type: 'success'
        })
        this.successImageUrl = URL.createObjectURL(file.raw)
        if (!this.uploaderSuccessCanChange) {
          this.uploaderShow = false
          this.uploaderDisabled = true
          this.uploaderLoading = false
        }
        this.$emit('on-success', response.data)
      } else {
        this.$message({
          message: response.data.message,
          type: 'warning'
        })
        this.uploaderLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin-bottom: 50px;
  .image-uploader {
    height: 100%;
  }
  .image-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    border: 1px dashed #d9d9d9;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, .5);
      transition: opacity .3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
      .el-icon-delete {
        font-size: 36px;
      }
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
}
.previewImage{
  display: flex;
  justify-content: center;
  align-items: center;
}
.previewImg{
  display: flex;
  justify-content: center;
  .previewImgButton{
    position: absolute;
    bottom: -50px;
  }
}
.custom-dialog {
  //background: rgba(0, 0, 0, 0); /* 半透明的背景 */
  background-color: transparent!important;
}

.custom-dialog {
  background-color: transparent; /* 使对话框的背景透明 */
  box-shadow: none; /* 移除阴影 */
}

.custom-dialog .el-dialog__header,
.custom-dialog .el-dialog__body,
.custom-dialog .el-dialog__footer {
  background-color: transparent; /* 透明的头部、内容和底部 */
}

.custom-dialog .el-dialog__header {
  border-bottom: none; /* 移除对话框头部的边框 */
}

.custom-dialog .el-dialog__footer {
  border-top: none; /* 移除底部的边框 */
}
</style>