ElementUI图片在Dialog中上传不回显问题

最新推荐文章于 2024-03-13 17:56:22 发布

呈两面包夹芝士

最新推荐文章于 2024-03-13 17:56:22 发布

阅读量1.5k

点赞数 2

分类专栏： Vue2.0 Element UI 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/Macao7_W/article/details/127109477

版权

本文介绍了在Vue项目中遇到的一个问题：图片上传后在Dialog中不显示。作者通过分析认为可能是Dialog内容无法实时更新，于是使用`this.$forceUpdate()`强制更新视图，成功解决了图片不显示的问题。关键代码和解决方案被详细展示。

摘要由CSDN通过智能技术生成

近日在写项目的时候发现在dialog中上传图片不会回显，上传完还是显示空白。
在这里插入图片描述
后台返回的图片地址也正常，但就是不显示。想了想可能是在dialog中已经弹出显示的对话框不能根据数据刷新节点，于是我就用了this.$forceUpdate()
代码如下：

<el-upload
        action=""
        :show-file-list="false"
        :http-request="uploadImg"
        :before

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

呈两面包夹芝士

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue element ui upload上传成功没有回显

weixin_42066070的博客

06-15

2887

使用element ui 封装的组件，父组件调用子组件的时候，图片数据有更新，但是视图上没有显示出来图片1.封装的子组件，每次数据更新的时候直接强刷2.查看图片的时候也直接强刷3.关键代码 4.不想啰嗦，直接上父组件的代码4.1标签引入子组件 4.2注册子组件 4.3调用子组件的强刷 5.子组件的代码...

Element 在el-dialog里使用upload组件上传本地图片回显，限制数量，后台返回展示

qq_37669585的博客

09-13

2775

新增服务，需要服务顶上传顶部宣传图，需求：采用element 组件，限制上传数量1，支持预览，删除，数量为1时，隐藏入口 <el-form-item label="顶部宣传图" style="height: 170px"> <div class="img"> <el-upload action="https://testopenapi.nbdeli.com/crm/customer/saveChannelLogoFile" :limit=

参与评论您还未登录，请先登录后发表或查看评论

elementUI 使用dialog upload组件上传不回显问题

bangbDIV的博客

03-30

1637

问题：dialog中进行上传图片并进行回显需求, 上传是成功了，就是回显不出来。原因：上传之后dialog中没有触发页面渲染解决办法：在上传成功 --> 赋值给data图片url值之后，调用this.$forceUpdate()方法, 直接调用vue的强制刷新机制，就可以解决了。代码如下： // 上传成功后的回调 handleAvatarSuccess(res, file) { this.dialogPartAdd.imageUrl = URL.createOb.

el-dialog对话框使用el-upload上传组件时图片不回显问题

weixin_43749805的博客

10-28

2103

今天在对话框中使用上传图片时，上传成功后页面没有回显。排查接口没有问题正常返回了图片URL，上传成功回调方法中也赋值成功。后面加了一个强制渲染数据成功显示图片。在上传图片成功后回调的方法中添加：this.$forceUpdate() //强制刷新渲染。

使用＜el-upload＞组件时上传图片成功后不回显如何解决(紧急避坑)

m0_68509013的博客

09-18

4644

2.但是这样使用的话会出现一个问题,el-image组件的src属性是动态绑定的，而item.src的值更新后并没有立即反映到el-image组件上。item.src" size="mini" type="primary">点击上传图片使用el-upload>组件时图片无法回显, 只能展示一个是否完成的图标, 这个对用户体验不是很友好, 无法直观的看到自己上传的图片.// 将返回值绑定到item.src变量原代码是: item.src=response.link。

el-upload 上传成功但是页面不回显

Koreyoshi123654的博客

02-28

2273

el-upload 上传成功但是页面不回显如果是直接上传到服务器，可在接口返回的时候用this.$set(this, ‘imgList’, res.data) this.$set(target, key, value) 就是解决数据更新了但是页面没有更新的问题官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 ...

springboot+vue+elementUi 实现多文件文件上传,并且通过配置nginx 回显图片

qq_42797435的博客

03-31

3611

springboot+vue+elementUi 实现多文件文件上传,并且通过配置nginx 回显图片 1. 首先在springboot项目的yml中配置,图片的地址跟图片的访问路径 #文件上传路径 uploadFilePath: D:\\resource #nginx代理路径 uploadFileMapping: http://localhost:8888/resource 2.编写后端接收图片方法 @Value("${uploadFilePath}") //图片地址 Stri

vue element图片、视频上传删除回显，动态添加上传组件的区分字段上传

黄哈哈的博客

07-14

1901

每次遇到图片上传都很麻烦其中删除回显格式限制，很繁琐，特别遇到动态添加多个上传组件进行分别上传时，这次终于全部搞定，特地记录下来整个过程。主要分为三个部分：1、单图片上传 2、多图片上传 3、动态添加表单项的多个上传（复杂、难点）......

vue-quill-editor+spring boot+elementui实现富文本编辑器图片上传并回显

m0_47576928的博客

07-26

1181

一、前端部分 1. 安装依赖 npm install vue-quill-editor –save 2. main.js引入 import QuillEditor from 'vue-quill-editor' import 'quill/dist/quill.bubble.css' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' Vue.use(QuillEditor) 3.新建公共组件Editor.

element ui 在Dialog对话框中使用 el-upload 上传图片后不回显的问题

B3325的博客

07-13

8640

我是在<el-dialog>对话框中使用表单<el-form>提交数据，在上传图片时，使用<el-upload>标签上传,此时问题来了，我明明在上传成功回调方法中已经将imgUrl重置了啊，但是并没有回显出来。  <el-upload :headers="headers" ...

element-ui upload 上传图片后，编辑回显

xuelong的博客

09-24

1211

文件上传提交后再编辑界面需要回显修改，这时候图片回显不出来。

elment-ui的上传组件图片不回显

那片枫叶~

01-28

3160

1、elment的上传组件的坑： file-list=“fileList” 两种情况： 1、直接在页面调用Upload 上传组件，根据官网来 2、在对话弹窗使用Upload 上传组件 (个人经历踩坑了！！！！！) 在对话框el-dialog 使用上传组件，个人知识技术比较菜，解释不一样正确，有问题的地方多谢指点。坑所在：因为对话框是变量控制显示隐藏的，我的需求是编辑功能，获取后端数据url，回显图片，数据重构成官网demo的数据结构，依旧不行，后面在点击显示弹窗的时候，调用了this.next

el-upload图片上传成功不回显问题

最新发布

CXYCMY的博客

03-13

1668

el-upload图片回显问题

（elementui-图片预览）el-dialog+el-image图片显示问题

ss_Tina的博客

10-31

5588

elementui图片预览。点击小图展示大图/点击预览按钮，弹框显示图片，点击图片预览大图。v-viewer预览&el-image预览！el-dialog+el-image图片预览问题修改。页面直接使用el-dialog和组件使用el-dialog。建议使用组件进行引入而不是直接将el-dialog写在页面中，可以修复一些显示性问题。

element-ui的el-upload组件上传单张图，不显示图片列表。

qq_44140499的博客

09-14

1720

element-ui的el-upload组件上传单张图，不显示图片列表。需求： 1.显示单张图片，不需要图片列表 2.可预览图片，删除图片重新上传环境 1.element-ui 2. vue3.0 实现效果： 1.test.vue 代码 <template> <div > <div class="myload"> <el-upload ref="picUpload" action="/admin/tes

vue中form组件中上传el-upload（单、多附件上传，以及上传回显以及编辑不出现等问题）

weixin_46565787的博客

12-15

4553

解决element-ui和 vant两个组件库上传组件，上传图片后无法显示图片的问题

haogemr的博客

07-12

2245

组件库上传图片显示问题

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

lgs7907

07-26

5177

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

vue element 单张图片上传，不展示图片

凡尘

06-16

945

vue element 图片上传

css如何让elementui中的dialog居页面中

06-07

要让ElementUI中的Dialog居页面中，可以设置Dialog的CSS属性。首先，需要将Dialog的`width`属性设置为一个固定的值，比如`400px`，然后将其`margin-left`和`margin-right`属性设置为`auto`。这将使Dialog在页面中水平居中。接着，将其`top`属性设置为`50%`，将其`transform`属性设置为`translateY(-50%)`，这将使Dialog在页面中垂直居中。以下是一个示例CSS代码，可以将其应用于ElementUI的Dialog组件： ```css .el-dialog__wrapper { display: flex; align-items: center; justify-content: center; } .el-dialog { width: 400px; margin: 0 auto; top: 50%; transform: translateY(-50%); } ``` 在上面的示例代码中，通过将`.el-dialog__wrapper`设置为`display: flex; align-items: center; justify-content: center;`，将Dialog居中。同时，`.el-dialog`的`width`设置为`400px`，`margin`设置为`0 auto`，`top`设置为`50%`，`transform`设置为`translateY(-50%)`，实现了水平和垂直居中。需要注意的是，由于Dialog的具体结构可能会因版本而异，上述CSS代码可能需要根据实际情况进行微调。