element-ui 上传图片回显
这里是用element-ui组件 已经接收数据 让图片回显
<el-form-item label="景区图片">
<el-upload list-type="picture-card"
:action="'https://scienicpc.kuxia.top/pcapi/File/fileimg'"
:on-change="handleChanges"
:before-remove="beforeRemove" :on-preview="handlePictureCardPreview"
:file-list="img"
multiple limit="1" name="img" v-model="formLabelAligns.img">
<el-icon class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
注意组件里的 :file-list='img' 这里 这里是回显的关键 有可能你的接口数据获取的是图片链接 没有办法直接在本地显示 在这里要做一个链接处理
//声明一个变量
const img = ref([])
//这里是你的图片的链接格式 需要添加url格式
img.value.push({
url: id.s_img
})
获取到你的图片之后 转一下格式 在:file-list='img'更改你后面引号里的数据 就可以做到回显效果啦
如果点击多个会有多个照片 就在点击事件的时候设置一个空数组就好了