文件上传，通过JS预览图片（无需服务器，只在本地进行）

二饭

于 2021-08-19 15:34:51 发布

阅读量252

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Stand_Fast/article/details/119803214

Vue 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中为文件上传输入框添加change事件，通过FileReader API读取文件并将其作为背景图片进行预览。通过设置DOM元素的背景图片样式，实现了文件上传后的实时预览效果。

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

如下使用的Vue项目，普通项目道理一样。

// 给文件上传input添加 change事件
bgChange(){
	let inputDOM = this.$refs.inputer; // input DOM
	let bg=this.$refs.app; // 要显示图片预览的DOM
	let file=inputDOM.files[0]; // 文件对象
	let reader = new FileReader();
	reader.onload = function(e) {
		let data = e.target.result; 
		bg.style.backgroundImage = 'url(' + data + ')'; // 设置背景图片
	};
	reader.readAsDataURL(file);
}