JS-FileReader,读取input:file中的图片(Vue)

最新推荐文章于 2023-06-03 11:54:50 发布

原创

最新推荐文章于 2023-06-03 11:54:50 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#H5 js #readAsDataURL

本文介绍了如何在Vue应用中利用HTML5的FileReader API和`readAsDataURL`方法实现用户上传头像的预览功能。通过包裹input[type=file]并监听change事件，获取文件数组，然后读取第一个file对象转换为data URL，将其赋值给img的src展示图片。

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

功能:用户上传头像

			<label>
                <input @change="imgChoose" class="none" type="file" accept="image/*">
                <img :src="imgSrc" alt="选择头像">
            </label>

用label包了一下,input标签不可见,点击img标签就可以选图片了.
使用change事件监听

		imgChoose(){
            let url = event.target.files[0];
            if(url==undefined){
                throw error('url is not defined');
            }
            if('FileReader' in window){
                let img = new FileReader();
                img.readAsDataURL(url);
                img.onload=({target})=>{
                    this.imgSrc=target.result;
                }
            }else{
                throw error('no FileReader in window');
            }
        }

用户上传之后,我们会获取一个文件数组,因为头像只有一张图,所以获取第一个file对象.
主要是用到了FileReader,使用new 构造一个他的子对象
使用API readAsDataURL()将file对象转换成可以插入img的src属性的data:URL字符串.
然后将值赋给src的变量就完成了,图片的展示