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

博主在el-dialog对话框中使用el-form表单上传图片,上传成功后imgUrl重置却无法回显。猜测是对话框不能根据数据刷新节点,通过在回调方法中关闭再开启对话框解决了回显问题,后续同伴还给出了另一种代码解决方式。

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

<!--上传图片-->
<el-upload
            :headers="headers"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadSuccessHandle"
            :before-upload="onBeforeUpload"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
          >
            <img v-if="dataForm.imgUrl" :src="dataForm.imgUrl" class="avatar" >
            <i v-else class="el-icon-plus avatar-uploader-icon" />
 </el-upload>


//上传图片成功后回调的方法
uploadSuccessHandle(e) {
      this.dataForm.imgUrl = e.url
    }

我思考了会,猜测是在<el-dialog>中,已经弹出显示的对话框不能根据数据刷新节点。于是我抖机灵的在回调方法中,将对话框关掉再开启,就成功将其回显出来了,并且在前端显示时并没有看出它关过。

uploadSuccessHandle(e) {
      this.dataForm.imgUrl = e.url
      this.dialogFormVisible = false
      this.dialogFormVisible = true
    }

2020.4.7编辑:

我同伴告诉我只需要加上下面那串代码就可以了,........;

this.$forceUpdate()

 

使用 Vue 和 Element UI 的 `el-upload` 组件时,如果希望在回显图片缩略图上添加删除图标,可以通过自定义文件列表模板来实现。Element UI 提供了 `list-type="picture-card"` 模式,允许开发者对上传的文件进行更灵活的展示和交互。 默认情况下,`el-upload` 在 `picture-card` 模式下会在每个缩略图上显示一个删除按钮,但如果你需要进一步自定义该删除图标的样式或位置,可以利用 `scoped` 插槽来自定义渲染内容。 以下是一个完整的示例代码,展示了如何在缩略图上添加一个自定义的删除图标,并绑定删除操作: ```html <template> <div> <el-upload action="#" list-type="picture-card" :file-list="fileList" :http-request="uploadImage" :on-remove="handleRemove" > <i class="el-icon-plus"></i> <!-- 使用 scoped 插槽自定义缩略图内容 --> <template #default="{ file }"> <img :src="file.url" alt="" style="width: 100%; height: 100%;" /> <span class="delete-icon" @click.stop="removeFile(file)"> <i class="el-icon-delete-solid"></i> </span> </template> </el-upload> <!-- 图片预览弹窗 --> <el-dialog :visible.sync="dialogVisible" append-to-body> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </div> </template> <script> export default { data() { return { fileList: [ { name: 'image1.jpg', url: 'https://example.com/image1.jpg' }, { name: 'image2.jpg', url: 'https://example.com/image2.jpg' } ], dialogVisible: false, dialogImageUrl: '' }; }, methods: { uploadImage(options) { // 自定义上传逻辑 console.log('开始上传:', options); }, handleRemove(file, fileList) { this.fileList = fileList; }, removeFile(file) { const index = this.fileList.findIndex(f => f.uid === file.uid); if (index > -1) { this.fileList.splice(index, 1); } }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; } } }; </script> <style scoped> .delete-icon { position: absolute; top: 5px; right: 5px; cursor: pointer; color: white; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; padding: 3px; } </style> ``` ### 关键点说明: - **自定义插槽**:通过 `<template #default="{ file }">` 插槽,可以完全控制缩略图的渲染方式。 - **删除图标**:使用 `el-icon-delete-solid` 图标作为删除按钮,并通过 CSS 定位到缩略图右上角。 - **阻止事件冒泡**:`@click.stop` 用于防止点击删除图标触发其他事件(如预览)。 - **更新文件列表**:调用 `splice` 方法从 `fileList` 中移除指定文件,同时会触发 `on-remove` 钩子函数[^1]。 ---
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值