element plus 的图片上传组件回显

简介: element plus 的图片上传组件回显

element图片回显是通过修改file-list属性的url属性实现的。

<!-- 图片上传 -->
        <el-form-item label="景区图片" prop="s_img">
          <el-upload
            list-type="picture-card"
            :action="网址"
            :on-change="handleChange"
            :before-remove="beforeRemove"
            :on-preview="handlePictureCardPreview"
            fit="cover"
            :file-list="绑定值"
            multiple
            :limit="1"
            name="file"
          >
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisibles" width="300">
            <img
              w-full
              :src="dialogImageUrl"
              alt="Preview Image"
              style="width: 80%; margin: auto"
            />
          </el-dialog>
        </el-form-item>

回显:

 

绑定值 = [
    {
      url: 图片路径,
    }
  ];
相关文章
|
弹性计算 云计算
记录下考Apsara Clouder云计算专项技能认证:云服务器ECS入门过程
Apsara Clouder云计算专项技能认证:云服务器ECS入门
38295 4
记录下考Apsara Clouder云计算专项技能认证:云服务器ECS入门过程
|
JavaScript 前端开发
el-upload上传文件
el-upload上传文件
1587 0
|
4月前
|
人工智能 JavaScript 数据可视化
2026年部署OpenClaw终极玩法:手把手教你通过6大超实用硬核Skills,轻松解锁AI辅助学习
在AI工具泛滥的今天,多数人仍将其当作“对话玩具”,却忽略了AI真正的价值——主动解决问题。OpenClaw的核心魅力,在于其开放的Skills生态:如果说大模型是AI的“大脑”,那Skills就是它的手脚、眼睛和专业工具箱。对于需要面对海量课件、复杂论文和严苛进度表的学生与职场人而言,选对并用好Skills,能让你的OpenClaw从“龙虾小兵”进化为“铁螯龙虾”。
2328 2
|
JSON 数据挖掘 API
小红书笔记评论API接口如何使用
小红书作为生活方式分享平台,评论是用户互动的核心形式。通过小红书笔记评论API接口,开发者可高效获取特定笔记下的评论数据(如内容、昵称、时间、点赞数等),用于舆情分析、用户反馈收集和市场调研。请求参数包括`note_id`、`page`、`page_size`、`timestamp`和`sign`,采用HTTP方式调用,返回JSON格式数据,为业务决策提供数据支持。
element-ui 上传图片回显
element-ui 上传图片回显
655 0
element plus 的图片上传组件回显
element plus 的图片上传组件回显
584 0
|
JSON 移动开发 资源调度
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
1117 0
|
JSON 数据格式
Echarts设置背景的网格线为虚线
Echarts设置背景的网格线为虚线
1118 0
Cesium添加3DTile
这篇文章介绍了如何在Cesium中添加3DTile内容,以增强三维地理空间数据的表现,并提供了实现的具体步骤和代码示例。
743 1
Cesium添加3DTile
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
10099 10

热门文章

最新文章