（vue）a-upload上传文件后将结果展示图片

亲测有效

项目背景：油气项目上传数字岩心图片

• 接口返回
  

• 控制台打印的info:
  

代码

<a-upload
  name="file"
  list-type="picture-card"
  class="avatar-uploader"
  :show-upload-list="false"
  :headers="headers" 
  :action="uploadAction"      
  @change="handleChange"
>
  <img v-if="imageUrl" :src="imageUrl" alt="avatar" class="yxImg"/>
  <div v-else>
    <a-icon :type="loading ? 'loading' : 'plus'" />
    <div class="ant-upload-text">
      请上传图片
    </div>
  </div>
</a-upload>

<script>
	export default {
	  data() {
	    return {
	      loading: false,
	      imageUrl: '', 
	      headers:{},
	      url: {
	        upload: "/.../struct2pic", //接口名称
	      }, 
	    };
	  },  
	  computed: {
	    uploadAction() {
	      return window._CONFIG['...URL'] + this.url.upload;//完整上传地址
	    }, 
	  },
	  mounted(){
	      const token = Vue.ls.get(ACCESS_TOKEN);
	      this.headers = {"X-Access-Token":token} 
	  },
	  methods: { 
	    handleChange(info){
	      console.log(info);
	      if (info.file.status === 'uploading') {
	        this.loading = true;
	        return;
	      }
	      if (info.file.status === 'done') {  
	        this.imageUrl = info.file.response.result;
	        this.loading = false;
	        this.formState.file = info.file     
	      } else if (info.file.status === 'error') {
	        this.loading = false;
	      }
	    },  
	};
</script>