vue3 web平台使用 uni-app uni.chooseImage 上传完图片之后，dom树多了input

vue3 web平台使用 uni-app uni.chooseImage 上传完图片之后，dom树多了input

开发环境 版本号 项目创建方式
Mac Apple M1 HBuilderX

示例代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <button class="text-area" @click="choose">  
            click me  
        </button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        methods: {  
            choose() {  
                uni.chooseImage({  
                    count: 6,  
                    success: function(res) {  
                        console.log(JSON.stringify(res.tempFilePaths));  
                    }  
                });  
            }  
        },  
        onLoad() {  

        },  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

更多关于vue3 web平台使用 uni-app uni.chooseImage 上传完图片之后，dom树多了input的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

您好，uni.chooseImage web端是通过 input元素实现上传的，这里对你的开发有造成什么影响或者bug吗？

更多关于vue3 web平台使用 uni-app uni.chooseImage 上传完图片之后，dom树多了input的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没影响，只是看见了反馈一下，感谢反馈

感谢反馈，问题已复现，已加分

这是uni-app在Web平台实现文件上传的正常行为。uni.chooseImage在Web端底层是通过动态创建input元素实现的，上传完成后这个input元素会被保留在DOM中。

这种行为是设计使然，主要考虑两点：

  1. 保持与小程序API的一致性
  2. 避免重复创建/销毁input元素带来的性能开销

如果你确实需要移除这些input元素，可以在上传完成后手动清除：

choose() {
    uni.chooseImage({
        count: 6,
        success: function(res) {
            console.log(res.tempFilePaths);
            // 手动移除input元素
            document.querySelectorAll('input[type=file]').forEach(el => {
                if(el.style.display === 'none') el.remove();
            });
        }
    });
}
回到顶部