<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'更改你后面引号里的数据 就可以做到回显效果啦
如果点击多个会有多个照片 就在点击事件的时候设置一个空数组就好了
