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: 图片路径,
    }
  ];
相关推荐
red润32 分钟前
let obj = { foo: 1 };为什么Reflect.get(obj, ‘foo‘, { foo: 2 }); // 输出 1?
开发语言·javascript·ecmascript
前端领航者1 小时前
重学Vue3《 v-for的key属性:性能差异与最佳实践》
前端·javascript
20261 小时前
13.2 ssr基本原理,构建步骤
前端·vue.js
咕噜分发企业签名APP加固彭于晏2 小时前
白嫖价值千元的EO
前端·javascript
前端开发爱好者2 小时前
首个「完整级」WebSocket 调试神器来了!
前端·javascript·vue.js
前端Hardy2 小时前
HTML&CSS&JS:高颜值登录注册页面—建议收藏
前端·javascript·css
白雾茫茫丶2 小时前
如何动态执行 JS 脚本
javascript
黑幕困兽3 小时前
vue 项目给输入框增加trim()方法
vue.js
龙国浪子3 小时前
从零构建桌面写作软件的书籍管理系统:Electron + Vue 3 实战指南
vue.js·electron
yede3 小时前
页面中模块通讯简单实现
前端·javascript·html