解决element-UI中 upload组件使用多个时无法绑定对应的元素

最新推荐文章于 2023-11-03 15:21:47 发布

xiaoma121212

最新推荐文章于 2023-11-03 15:21:47 发布

阅读量559

点赞数

分类专栏： element-ui 文章标签： element-ui 多个upload组件

本文链接：https://blog.csdn.net/xiaoma19941027/article/details/102618651

版权

本文档详细介绍了在使用Element-UI时，如何处理和解决Upload组件在同一个页面内创建多个实例时，无法正确绑定对应元素的问题。通过对组件属性的设置和事件监听的优化，确保每个Upload组件能够独立工作并正确响应用户操作。

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

<template>
  <div>
    <el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="(res,file) =>{handleAvatarSuccess(res,file,1)} "
  :before-upload="beforeAvatarUpload" >
  <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>


<el-upload 
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="(res,file) =>{handleAvatarSuccess(res,file,2)} "
  :before-upload="beforeAvatarUpload" >
  <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-ic