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: 图片路径,
    }
  ];
相关推荐
ZC跨境爬虫16 分钟前
跟着 MDN 学 HTML day_54:(深入掌握 XSLTProcessor API)
前端·javascript·ui·html·媒体
Csvn26 分钟前
JS 技巧:设计模式(上)
前端·vue.js
Delicate38 分钟前
JavaScript 的双面人生:基本类型与引用类型的那些事儿
javascript
Pu_Nine_91 小时前
Vue3 + ECharts 企业级封装实践:按需引入 + useECharts Hooks
前端·vue.js·echarts
YAwu111 小时前
JavaScript 作用域与执行机制深度解析
前端·javascript
Yue1681 小时前
天津理工大学前端组大一末期考核随记(2)
前端·javascript
hexu_blog1 小时前
前端vue后端java+springboot如何实现pdf,word,excel之间的相互转换
java·前端·vue.js·spring boot·文档转换
w_t_y_y1 小时前
vue父子组件通信(二)祖先调用inject
前端·javascript·vue.js
wkj0012 小时前
JavaScript模块化技术进程详解
开发语言·javascript·ecmascript