element plus 的图片上传组件回显

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

html 复制代码
  <!-- 图片上传 -->
        <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>

回显:

javascript 复制代码
绑定值 = [
    {
      url: 图片路径,
    }
  ];
相关推荐
ayqy贾杰1 小时前
Agent First Engineering
前端·vue.js·面试
大金乄2 小时前
封装一个vue2的elementUI 表格组件(包含表格编辑以及多级表头)
前端·javascript
徐小夕3 小时前
JitWord 2.3: 墨定,行远
前端·vue.js·github
Lee川4 小时前
解锁 JavaScript 的灵魂:深入浅出原型与原型链
javascript·面试
swipe5 小时前
从原理到手写:彻底吃透 call / apply / bind 与 arguments 的底层逻辑
前端·javascript·面试
踩着两条虫5 小时前
从设计稿到代码:VTJ.PRO 的 AI 集成系统架构解析
前端·vue.js·人工智能
Lee川7 小时前
探索JavaScript的秘密令牌:独一无二的`Symbol`数据类型
javascript·面试
Lee川7 小时前
深入浅出JavaScript事件机制:从捕获冒泡到事件委托
前端·javascript
光影少年7 小时前
async/await和Promise的区别?
前端·javascript·掘金·金石计划
codingWhat7 小时前
如何实现一个「万能」的通用打印组件?
前端·javascript·vue.js