zoukankan      html  css  js  c++  java
  • 封装组件el-upload通过v-model (三): 封装 img,非url返回

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

  • 相关阅读:
    读书计划
    《梦断代码》读书笔记1
    合作项目5
    合作项目4
    合作项目3
    电梯调度需求分析
    合作项目2
    四则运算3程序
    合作编程
    四则运算某模块程序测试
  • 原文地址:https://www.cnblogs.com/wxhwpmdyz/p/12909567.html
Copyright © 2011-2022 走看看