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

最新推荐文章于 2024-05-26 12:42:56 发布

原创最新推荐文章于 2024-05-26 12:42:56 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

13 篇文章

订阅专栏

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

如下使用的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);
}