组件中多个el-upload存在导致上传图片失效的问题及解决

 更新时间:2023年03月28日 09:58:51   作者:闹闹的闹钟  
这篇文章主要介绍了组件中多个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结果:完美解决多次上传失效问题! 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue导出json数据到Excel电子表格的示例

    Vue导出json数据到Excel电子表格的示例

    本篇主要介绍了Vue导出json数据到Excel电子表格的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

    为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

    这篇文章主要介绍了为什么Vue3.0使用Proxy实现数据监听?defineProperty表示不背这个锅,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • M1 pro芯片启动Vue项目的方法步骤

    M1 pro芯片启动Vue项目的方法步骤

    本文主要介绍了M1 pro芯片启动Vue项目的方法步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue-router vuex-oidc动态路由实例及功能详解

    vue-router vuex-oidc动态路由实例及功能详解

    这篇文章主要为大家介绍了vue-router vuex-oidc动态路由实例及功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Vue学习笔记进阶篇之过渡状态详解

    Vue学习笔记进阶篇之过渡状态详解

    本篇文章主要介绍了Vue学习笔记进阶篇之过渡状态详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 解决vue内存溢出报错的问题

    解决vue内存溢出报错的问题

    这篇文章主要介绍了解决vue内存溢出报错的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue.js项目使用原生js实现移动端的轮播图

    vue.js项目使用原生js实现移动端的轮播图

    这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • Vue.use()的作用及原理解析

    Vue.use()的作用及原理解析

    这篇文章主要介绍了Vue.use()的作用及原理解析,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • vue-cli3添加模式配置多环境变量的方法

    vue-cli3添加模式配置多环境变量的方法

    这篇文章主要介绍了vue-cli3添加模式配置多环境变量的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    小编最近在做一个vue前端项目,需要实现弹窗的拖拽,四边拉伸及对角线拉伸,以及弹窗边界处理功能,本文通过实例代码给大家分享我的实现过程及遇到问题解决方法,感兴趣的朋友一起看看吧
    2021-08-08

最新评论