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: 图片路径,
    }
  ];
相关推荐
工程师老罗2 小时前
Image(图像)的用法
java·前端·javascript
早點睡3902 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-swiper
javascript·react native·react.js
jump_jump3 小时前
深入 JavaScript Iterator Helpers:从 API 到引擎实现
javascript·性能优化
swipe3 小时前
把 JavaScript 原型讲透:从 `[[Prototype]]`、`prototype` 到 `constructor` 的完整心智模型
前端·javascript·面试
Dxy12393102163 小时前
JS发送请求的方法详解
开发语言·javascript·ecmascript
harrain4 小时前
antvG2折线图和区间range标记同时绘制
前端·javascript·vue.js·antv·g2
网络点点滴5 小时前
组件通信-作用域插槽
前端·javascript·vue.js
LZQ <=小氣鬼=>6 小时前
React 图片放大镜组件使用文档
javascript·react.js·前端框架·ecmascript
kyriewen116 小时前
异步编程:从“回调地狱”到“async/await”的救赎之路
开发语言·前端·javascript·chrome·typescript·ecmascript·html5
早點睡3906 小时前
ReactNative项目Openharmony三方库集成实战:@react-native-clipboard/clipboard
javascript·react native·react.js