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'更改你后面引号里的数据 就可以做到回显效果啦

如果点击多个会有多个照片 就在点击事件的时候设置一个空数组就好了