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入门
38435 4
记录下考Apsara Clouder云计算专项技能认证:云服务器ECS入门过程
|
JavaScript 小程序 前端开发
[Vue warn]: Error in callback for watcher “fileList“: “TypeError: Cannot create property ‘uid‘ on st
[Vue warn]: Error in callback for watcher “fileList“: “TypeError: Cannot create property ‘uid‘ on st
684 0
|
8月前
|
人工智能 JavaScript 数据可视化
2026年部署OpenClaw终极玩法:手把手教你通过6大超实用硬核Skills,轻松解锁AI辅助学习
在AI工具泛滥的今天,多数人仍将其当作“对话玩具”,却忽略了AI真正的价值——主动解决问题。OpenClaw的核心魅力,在于其开放的Skills生态:如果说大模型是AI的“大脑”,那Skills就是它的手脚、眼睛和专业工具箱。对于需要面对海量课件、复杂论文和严苛进度表的学生与职场人而言,选对并用好Skills,能让你的OpenClaw从“龙虾小兵”进化为“铁螯龙虾”。
2558 2
element-ui 上传图片回显
element-ui 上传图片回显
715 0
|
存储 SQL 前端开发
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
本节以“账本”为例,使用关系型数据库接口实现账单的增、删、改、查操作。通过创建ArkTSRdb应用,演示如何操作RdbStore进行数据管理,并结合界面按钮实现交互功能。
724 0
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
|
JavaScript 程序员 数据安全/隐私保护
【Vue面试题二十】、你有写过自定义指令吗?自定义指令的应用场景有哪些?
这篇文章详细介绍了Vue中的自定义指令,包括指令系统的概念、如何实现自定义指令的全局和局部注册,以及自定义指令的钩子函数。文章还提供了几个自定义指令的应用场景示例,如表单防止重复提交、图片懒加载和一键复制功能,展示了自定义指令的灵活性和强大功能。
【Vue面试题二十】、你有写过自定义指令吗?自定义指令的应用场景有哪些?
|
JSON 数据格式
Echarts设置背景的网格线为虚线
Echarts设置背景的网格线为虚线
1199 0
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
5071 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
|
存储 JavaScript 安全
Vue 3 环境变量配置
Vue 3 环境变量配置