多个upload组件放在for循环调用submit失效的解决方法

女码农୧( ⁼̴̶̤̀ω⁼̴̶̤́ )૭

于 2024-03-19 21:59:28 发布

阅读量614

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端bug 文章标签：前端 bug

本文链接：https://blog.csdn.net/m0_46615524/article/details/136856838

文章讲述了在使用Vue.js的ElementUI库中的el-upload组件进行图片上传时，遇到的问题：原触发方法中的this.$refs引用错误。作者发现正确方式是通过`this.$refs[upload+index][0].submit()`来访问并提交上传请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例代码

<div class="item" v-for="(item,index) in lbtList">
                    <!-- 图片上传 -->
                    <div>
                        <el-upload
                            action="#"
                            :ref="'upload'+index"
                            list-type="picture-card"
                            :limit="1"
                            :file-list="item.fileList"
                            :http-request="handleFileUpload"
                            :on-preview="handlePictureCardPreview"
                            :on-change="file=>{handleChange(file,item.fileList,index)}"
                            :on-remove="file=>{handleRemove(file,item.fileList,index)}"
                            :auto-upload="false"
                            accept&#

最低0.47元/天解锁文章