封装组件el-upload通过v-model : 封装 img,非url返回

Posted 2021-02-19 wxhwpmdyz

前面两篇讲了上传图片,  开发时可能不是返回url

和普通的img标签没区别   

vue效果 对src进行二次封装

 

 

 

  vue 代码 

<template>
   <img   :src="imageUrl"  />
</template>

<script>

  import { getFileUrl } from "@/api/upload";
  export default {
    props: {
       src:"",
    },
    data() {
      return {
      imageUrl:‘‘,
      };
    },
    //监听父组件值是否在变化
      watch: {
        //有些页面初始初始src没有赋值
         src(newName, oldName){
           this.imageUrl= getFileUrl(newName);
          },
      },
    computed: {},
    created: function () {


    },
    methods: {
     
    },
    mounted(){
     this.imageUrl= getFileUrl(this.src);
    }
  };
</script>

 upload.js 获取图片url

import {Url,CCONFIG} from "@/api/apiconfig";

export const getFileUrl = (id) => {
  if(id)
    return Url.imge_getFile + id; //获取图片url
  else
    return ‘‘;
}

QQ交流群:929412850 希望大家一起能够探讨学习