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: 图片路径,
    }
  ];

效果展示:

目录
相关文章
|
前端开发 API
服务端渲染-nextjs如何发起请求
服务端渲染-nextjs如何发起请求
1344 0
|
人工智能 自然语言处理 数据可视化
阿里云 Bolt.diy:一键开启全能开发,简单强大零门槛
Bolt.diy是Bolt.new的开源版本,通过自然语言交互简化开发流程,支持全栈开发与二次开发。依托多模态智能调度引擎和主流大模型,实现任务智能匹配、模块化部署及私有模型集成,大幅提升开发效率。平台提供代码自动生成、实时诊断优化与可视化工具,降低开发门槛。体验中发现其简单易用,但存在偶发卡顿问题。总体而言,Bolt.diy是一款高效实用的开发工具,适合新手与企业使用。
627 7
|
前端开发 数据格式
vue+element-plus上传图片功能以及回显问题还有数量限制
vue+element-plus上传图片功能以及回显问题还有数量限制
1129 0
|
JavaScript 前端开发 数据可视化
Element Plus图片上传组件二次扩展
Element Plus图片上传组件二次扩展
1017 0
|
存储 JavaScript 前端开发
Vue中实现图片上传,上传后的图片回显,存储图片到服务器 【使用对象存储OSS】
这篇文章介绍了在Vue中实现图片上传到阿里云OSS对象存储服务的完整流程,包括服务端签名直传的前提知识、后端设置、前端组件封装以及图片上传和回显的效果展示。
element plus 的图片上传组件回显
element plus 的图片上传组件回显
383 0
|
数据采集 存储 数据挖掘
如何利用Python进行网页数据抓取
本文将详细介绍如何使用Python进行网页数据抓取。首先,我们将了解什么是网络爬虫以及其基本原理。然后,逐步讲解如何使用Python的requests库和BeautifulSoup库来抓取和解析网页数据。最后,通过实例展示如何实际应用这些技术来获取所需的数据并进行简单的数据处理。希望通过这篇文章,读者能够掌握基本的网页数据抓取技巧,并能在实际应用中灵活运用。
1528 1
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
5101 0

热门文章

最新文章