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

文章大纲:

1.问题描述

2.解决方式

3.问题解决后效果展示

1.问题描述:

使用el-upload>组件时图片无法回显, 只能展示一个是否完成的图标, 这个对用户体验不是很友好, 无法直观的看到自己上传的图片.

2.解决方式:

1.直接在按钮上添加<el-image通过上传成功后拿到图片链接然后通过src属性进行引用,如图
<el-image v-if="item.src" :src="item.src" fit="contain" style="max-width: 50%; max-height: 100px;" ></el-image>
<i v-else class="el-icon-upload"></i>
<el-button v-if="!item.src" size="mini" type="primary">点击上传图片</el-button>

2.但是这样使用的话会出现一个问题,el-image组件的src属性是动态绑定的，而item.src的值更新后并没有立即反映到el-image组件上。这个时候我们可以通过Vue.js提供的$set方法来确保更新el-image组件的src属性。在上传成功的函数里进行修改,代码如下所示：
handleUploadSuccess(response, file, fileList, item) {
              // 将返回值绑定到item.src变量 原代码是: item.src=response.link
              this.$set(item, 'src', response.link); //修改后代码
              // 更新文件列表中对应文件的链接
                  const uploadedFile = fileList.find(f => f.uid === file.uid);
                  if (uploadedFile) {
                    uploadedFile.url = response.link;
                  }
              this.$message({
                showClose: true,
                message: '上传成功',
                type: 'success'
              })
            },

3.问题解决后效果展示: