封装组件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 希望大家一起能够探讨学习