proginn-frontend/components/uploader.vue

<template>
  <div class="uploader">
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :multiple="false"
      accept="image/png, image/jpeg"
      :before-upload="handleFileChange"
    >
      <i v-if="imageUrl" class="el-icon-delete avatar-uploader-icon" @click.stop="handleDeleteFile"></i>
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      <span v-if="title" class="title">{{title}}</span>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: ["imageUrl", "title", "limitFileSize"],
  components: {},
  data() {
    return {
      uploading: false
    };
  },
  computed: {},
  mounted() {},
  methods: {
    handleDeleteFile() {
      this.$emit("change", "");
    },
    handleFileChange(file) {
      if (this.limitFileSize && this.limitFileSize > 0) {
        if (file.size / (1024 * 1024) > this.limitFileSize) {
          this.$message.error(`图片大小不得超过${this.limitFileSize}M，请重新选择`);
          return false;
        }
      } else if (file.size / 1024 > 2048) {
        this.$message.error("图片大小不得超过2M，请重新选择");
        return false;
      }
      const formData = new FormData();
      formData.append("file", file);
      formData.append("original_filename", file.name);
      this.uploading = true;
      this.$axios
        .$post(`/upload_image`, formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(res => {
          this.$emit("change", res.filename);
        })
        .finally(() => {
          this.uploading = false;
        });
    }
  }
};
</script>

<style lang="scss">
.uploader {
  position: relative;
  background: #fff;
  .el-icon-delete {
    display: none;
  }
  .avatar-uploader .el-upload {
    width: 184px;
    height: 162px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: top left;
    }
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
    .el-icon-delete {
      display: block;
    }
  }
  .avatar-uploader-icon {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 44px;
    color: #dce1e8;
    width: 184px;
    height: 162px;
    line-height: 160px;
    text-align: center;
    /* background: rgba(1, 1, 1, 0.1); */
    :hover {
      color: #409eff;
    }
  }
  .avatar {
    width: 184px;
    height: 162px;
    display: block;
  }
  .title {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    font-size: 13px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(25, 34, 46, 1);
    line-height: 18px;
  }
}
</style>