js 图片 手动上传，并回显

2023-12-21 12:43:19

效果展示：

代码：

      <label for="avatarUpload">
                            <div>
                                <img v-if="avatatImageUrl" :src="avatatImageUrl" class="avatar">
                                <img v-else src="../../assets/images/account/avatar-upload.png" class="w-150px h-150px cursor-pointer" alt="">
                            </div>
                        </label>
                        <input type="file" id='avatarUpload' hidden @change='aa'>
    const aa = (e)=>{

        console.log(e);
        const file = e.target.files[0]

        console.log(file);
       
        // // 文件预览
        const reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onload=()=>{
            avatatImageUrl.value = reader.result

            console.log(avatatImageUrl.value);
            
        }
    }

?

文章来源:https://blog.csdn.net/qq_44603011/article/details/135127345
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。