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

效果展示:

目录
相关文章
|
2月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
74 0
|
6月前
|
JSON JavaScript 数据格式
vue-element-admin表格json数据渲染,异常数据一行显示红色
vue-element-admin表格json数据渲染,异常数据一行显示红色
73 1
element ui 带上传文件的form表单
element ui 带上传文件的form表单
812 0
|
10月前
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
302 0
|
29天前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
17 1
|
2月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
16 0
|
3月前
element el-upload上传图片完成后隐藏上传
element el-upload上传图片完成后隐藏上传
|
5月前
element plus 的图片上传组件回显
element plus 的图片上传组件回显
|
5月前
封装element-plus上传图片组件
v封装element-plus上传图片组件
|
10月前
|
前端开发 数据格式
vue+element-plus上传图片功能以及回显问题还有数量限制
vue+element-plus上传图片功能以及回显问题还有数量限制
272 0