單張圖片上傳，vue

點擊圖片可可以實現上傳

<template>
  <div>
    <a-upload
      class="avatar-uploader"
      :showUploadList="false"
      :beforeUpload="beforeUpload"
      listType="picture-card"
      action="/amo/dist/picUpload"
      :headers="headers"
      @change="handleChange"
    >
      <img v-if="imageUrl" :src="imageUrl" alt="avatar" width="128" height="128" />
      <div v-else>
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
  </div>
</template>
<script>
import { retriveMyDetail } from "@/api/information";
export default {
  data() {
    return {
      loading: false,
      imageUrl: "",
      headers: {
        Authorization: "Bearer" + this.$store.state.user.token
      }
    };
  },
  created() {
    this.getTableList();
  },
  methods: {
    getTableList() {
      this.spinning = false;
      retriveMyDetail().then(res => {
           this.imageUrl = res.data.qualificationPic1;

      });
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
          this.imageUrl = info.file.response.data[0].filePath;
          this.loading = false;

      }
    },
    //上傳文件之前的鈎子，參數為上傳的文件，若返回 false 則停止上傳。
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg"; //判斷上傳文件格式
      if (!isJPG) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 5; //計算上傳文件的大小
      if (!isLt2M) {
        this.$message.error("Image must smaller than 5MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
<style>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>