码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-05-18 12:04:25      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:没有   model   func   上传   fun   赋值   turn   mamicode   取图   

前面两篇讲了上传图片,  开发时可能不是返回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 希望大家一起能够探讨学习

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

标签:没有   model   func   上传   fun   赋值   turn   mamicode   取图   

原文地址:https://www.cnblogs.com/wxhwpmdyz/p/12909567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!