组件中多个el-upload存在导致上传图片失效的问题及解决
组件中多个el-upload存在导致上传图片失效
情景介绍
公司中开发的后台系统使用的是vue + Avue + elm组件,在打开新增的弹窗的后弹窗内有一个点击新增配置按钮会自动生成一行表格的功能,在生成的表格中有一列是上传图片的功能,由于配置详情这个字段下的表格是手动生成的,导致二次上传表格内的封面图的时候会出现上传没任何反应的情况
百度了很久也没找到解决办法,最后经过一步一步的尝试发现elm组件在页面首次渲染只会初始化一次的情况。
功能图片

尝试的解决办法
方法1
在el-upload上动态绑定ref,这样在每次上传成功后我都通过获取对应的ref调用上传组件的clearFiles()进行文件清空操作,这样方便二/N次上传仍然是生效的;
<avue-crud :option="configOption" :data="formData.configDetails">
<template slot="coverImg" slot-scope="scope">
<el-upload
class="avatar-uploader"
accept="image/*"
:http-request="(param) => uploadImage(param, scope.row)"
action="~~"
:limit="1"
:ref="'coverPicUpload' + scope.row.$index"
:show-file-list="false"
:before-upload="beforeUpload"
>
<el-image
style="width: 300px; height: 150px"
fit="contain"
v-if="scope.row.picUrl"
:src="scope.row.picUrl"
>
</el-image>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div style="color:red;">图片格式: jpg/gif 图片尺寸: 1920X1080</div>
</template>
</avue-crud> //上传封面图片
uploadImage(param, row) {
....执行上传的方法,上传成功后执行下行代码
this.$refs['coverPicUpload'+row.$index].clearFiles()
},方法1的结果:
并没有解决我的问题,仍然只有弹窗首次打开初始化的那一行的上传在多次点击的时候能正常使用,手动添加的几行只有第一次上传能正常,二次点击就没有反应;
方法2
在1的基础上,同时对el-upload进行初始化,也就是在el-upload组件的任意上级元素上添加 v-if="updateInit",在每次手动新增一行的时候会让所有的el-upload进行初始化,这样每一行都会有自己的上传组件;
<el-form-item v-if="updateInit" label="配置详情:" prop="configDetails">
<avue-crud :option="configOption" :data="formData.configDetails">
<template slot="coverImg" slot-scope="scope">
<el-upload
class="avatar-uploader"
accept="image/*"
:http-request="(param) => uploadImage(param, scope.row)"
action="~~"
:limit="1"
:ref="'coverPicUpload' + scope.row.$index"
:show-file-list="false"
:before-upload="beforeUpload"
>
<el-image
style="width: 300px; height: 150px"
fit="contain"
v-if="scope.row.picUrl"
:src="scope.row.picUrl"
>
</el-image>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div style="color:red;">图片格式: jpg/gif 图片尺寸: 1920X1080</div>
</template>
</avue-crud>
</el-form-item> // 新增配置
addConfig() {
this.updateInit = false
this.formData.configDetails.push({
title: "",
picKey: "",
picUrl: "",
});
this.$nextTick(() => {
this.updateInit = true
})
},方法2结果:完美解决多次上传失效问题!
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
这篇文章主要介绍了为什么Vue3.0使用Proxy实现数据监听?defineProperty表示不背这个锅,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue-router vuex-oidc动态路由实例及功能详解
这篇文章主要为大家介绍了vue-router vuex-oidc动态路由实例及功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11


最新评论