vue2，js， ant design，a-upload 单张图片上传 v-model

vue2，js， ant design，a-upload 单张图片上传 v-model

<!-- 
  图片上传
 -->
<template>
  <div class="UploadImg">
    <header class="help" v-if="help">
      <div class="tag_icon">推荐上传</div>
      {{ help }}
    </header>
    <a-upload
      :action="actionUrl"
      accept=".jpg,.jpeg,.png"
      list-type="picture-card"
      :file-list="imageFileList"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <div v-if="imageFileList.length < 1">
        <a-icon class="icon_image" type="file-image" />
        <div class="ant-upload-text">上传图片</div>
      </div>
    </a-upload>
  </div>
</template>
<script>
import { v4 as uuidv4 } from 'uuid';

const imgTypeArr = ['image/jpeg', 'image/jpg', 'image/png'];

export default {
  props: {
    value: {
      type: String,
    },
    help: {
      type: String,
    },
    fileSize: {
      type: Number,
      default: Infinity,
    },
  },
  data() {
    return {
      actionUrl: `/app_hub/file/upload`,
      imageFileList: [],
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          this.imageFileList = [
            {
              uid: uuidv4(),
              name: newValue.split('/').pop(),
              thumbUrl: newValue,
              url: newValue,
            },
          ];
        }
      },
    },
  },
  mounted() {},
  methods: {
    // 上传前校验
    beforeUpload(file, fileList) {
      const isJpgOrPng = imgTypeArr.includes(file.type);

      if (!isJpgOrPng) {
        this.$message.error('上传图片只能是 JPG,JPEG,PNG 格式!');
        return false;
      }
      const isLt = file.size / 1024 / 1024 < this.fileSize;
      if (!isLt) {
        this.$message.error(`上传图片大小不能超过 ${this.fileSize}MB!`);
        return false;
      }
      return true;
    },
    // 封面图片上传
    handleChange({ file, fileList }) {
      if (file.status === 'uploading') {
        this.imageFileList = fileList;
      }

      if (file.status === 'removed') {
        this.imageFileList = fileList;
        this.output();
      }
      if (file.status === 'done') {
        this.imageFileList = fileList;
        this.output();
        this.$message.success('图片上传成功');
        // this.form.productLogoUrl = file.response.msg;
      } else if (file.status === 'error') {
        this.$message.error('图片上传失败');
      }
    },
    output() {
      const imgUrl = this.imageFileList[0]?.response?.data?.uploadUrl;
      this.$emit('input', imgUrl);
    },
  },
};
</script>
<style lang="less" scoped>
.UploadImg {
  .help {
    font-size: 12px;
    color: #86909c;
    line-height: 20px;
    margin-bottom: 12px;
    > .tag_icon {
      display: inline-block;
      font-size: 12px;
      color: #ffffff;
      padding: 0 8px;
      border-radius: 4px 4px 4px 0px;
      background: #ff7500;
    }
  }
  /deep/ .ant-upload-picture-card-wrapper {
    height: 162px;
  }
  /deep/ .ant-upload-select-picture-card {
    width: 289px;
    height: 162px;
    border-radius: 4px;
  }
  /deep/ .ant-upload-list-item-list-type-picture-card {
    width: 289px;
    height: 162px;
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
  }
  /deep/ .ant-upload-list-item-info > span {
    text-align: center;
  }
  /deep/ .ant-upload-list-item-progress {
    // margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 30px;
  }
}
.icon_image {
  font-size: 32px;
  color: #86909c;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #86909c;
}
</style>