ElementUi upload组件list-type:picture-card 编辑图片回显问题解决
一、问题分析:
再使用 ElementUI 的 upload 组件进行上传图片的时候 点击编辑发现图片并不显示 但是又想用他的那个卡片显示 但是一直不知道回显入口在哪 真的是急死小爷我了
拖延症晚期患者 今天终于给他解决了
二、问题解决代码(关键):
<el-upload style="display: inline-block" class="avatar-uploader" list-type="picture-card" :on-change = 'uploadChange' action="" :limit="1" accept=".jpg,.png,.jpeg,JPG,JPEG" :http-request="uploadImg" :file-list="fileList"> <i class="el-icon-plus"></i> </el-upload>
this.showImg = this.img[0] let urlStr = this.showImg.split(","); urlStr.forEach(item => { let obj = new Object(); obj.url = item; this.fileList.push(obj); }); //this.fileList是el-upload组件的file-list属性直接把图片push到这个数组就可以实现回显了