vue中上传图片并预览

最新推荐文章于 2023-05-05 08:28:23 发布

原创最新推荐文章于 2023-05-05 08:28:23 发布 · 927 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #webkit #firefox #前端

前端专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何在前端开发中实现图片上传后显示缩略图并进行预览的功能。通过JavaScript的createObjectURL方法获取文件路径，并将其赋值给img元素的src属性，从而实现实时预览。此功能对于网页上的图像上传和处理至关重要，适用于各种文件上传场景。

需求：上传图片，显示其缩略图，点击可预览
实现：获取文件的路径赋值给img的src属性

获取路径代码如下：

getobjurl(file){
	let url = null
	if (window.createObjectURL !== undefined) {
		url = window.createObjectURL(file)
	} else if (window.URL !== undefined) {
		url = window.URL.createObjectURL(file)
	} else if (window.webkitURL !== undefined) {
		url = window.webkitURL.createObjectURL(file)
	}
	return url
}