vue中上传图片并预览

最新推荐文章于 2025-05-14 17:59:12 发布

Dean_shiyi

最新推荐文章于 2025-05-14 17:59:12 发布

阅读量891

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue js webkit firefox 前端

本文链接：https://blog.youkuaiyun.com/Dean_shiyi/article/details/109732425

前端专栏收录该内容

3 篇文章

订阅专栏

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

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

需求：上传图片，显示其缩略图，点击可预览
实现：获取文件的路径赋值给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
}