遇到的Vue elementUI图像上传不显示的问题

编者：李国帅qq：9611153 微信lgs9611153时间：2021-7-26问题描述:在使用Vue elementUI图像上传组件el-upload的时候，发现如果ruleForm没有原始数据，上传图片后，图片无法显示。于是经过仔细的分析比较，发现只要把<el-form-item的绑定属性和<el-upload内部<img的属性设置为不同变量，上传完成后设置img的src即

微澜-

5173人浏览 · 2021-07-26 18:14:34

微澜- · 2021-07-26 18:14:34 发布

编者：李国帅

qq：9611153 微信lgs9611153

时间：2021-7-26

问题描述:

在使用Vue elementUI图像上传组件el-upload的时候，发现如果ruleForm没有原始数据，上传图片后，图片无法显示。

于是经过仔细的分析比较，发现只要把<el-form-item的绑定属性和<el-upload内部<img的属性设置为不同变量，上传完成后设置img的src即可。

解决方案:

<el-dialog

title="添加设备"

:visible.sync="innerVisible"

destroy-on-close

append-to-body

<el-form

:model="ruleForm"

:rules="rules"

ref="ruleForm"

label-width="100px"

style="width: 450px"

<el-form-item label="图片：" prop="imgUrl">

<el-upload

:data="otherData"

list-type="picture"

class="avatar-uploader"

:action="uploadurl"

:show-file-list="false"

:on-success="handleAvatarSuccess"

</el-upload>

</el-form-item>

</el-form>

</el-dialog>

参考：

https://element.eleme.cn/#/zh-CN/component/upload

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^