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入门
38204 4
记录下考Apsara Clouder云计算专项技能认证:云服务器ECS入门过程
|
JavaScript 前端开发
el-upload上传文件
el-upload上传文件
1532 0
element-ui 上传图片回显
element-ui 上传图片回显
617 0
element plus 的图片上传组件回显
element plus 的图片上传组件回显
544 0
|
JSON 移动开发 资源调度
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
1047 0
|
JavaScript
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
|
JavaScript 程序员 数据安全/隐私保护
【Vue面试题二十】、你有写过自定义指令吗?自定义指令的应用场景有哪些?
这篇文章详细介绍了Vue中的自定义指令,包括指令系统的概念、如何实现自定义指令的全局和局部注册,以及自定义指令的钩子函数。文章还提供了几个自定义指令的应用场景示例,如表单防止重复提交、图片懒加载和一键复制功能,展示了自定义指令的灵活性和强大功能。
【Vue面试题二十】、你有写过自定义指令吗?自定义指令的应用场景有哪些?
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
652 2