Single image upload, 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" ) {
         The this .loading =  to true ;
         return ; 
      } 
      IF (info.file.status ===  " DONE " ) {
           the this .imageUrl = info.file.response.data [ 0 ] .filePath;
           the this .loading =  to false ; 

      } 
    } 
    // before the upload file hooks parameters uploaded files, return false if the stop uploading. 
    beforeUpload (file) { 
      const isJPG = file.type ===  " Image / JPEG " ; //Analyzing upload file format 
      if ( ! IsJPG) {
         the this $ Message.Error An (. " By You CAN only JPG File Upload! " ); 
      } 
      Const isLt2M = file.size /  1024  /  1024  <  . 5 ; // calculate upload file size 
      if ( ! isLt2M) {
         the this . Message.Error An $ ( " Image MUST Smaller Within last 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>