结合el-upload修改支持上传图片、视频并预览

最新推荐文章于 2025-05-19 11:35:48 发布

原创最新推荐文章于 2025-05-19 11:35:48 发布 · 3.4k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端

HTML/CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在ElementPlus库中使用el-upload组件，实现在前端进行图片和视频的上传，支持在线预览和动态调整大小。代码展示了HTML结构、JavaScript逻辑以及CSS样式的应用。

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

结合element plus的el-upload标签，实现上传图片和视频，并支持在线预览和放大
1、html部分

<el-form-item label="活动照片、视频">
	<el-upload
		v-model:file-list="state.photoList"
		:action="state.uploadUrl"
		accept=".jpg,.png,.jpeg,.mp4,.mov,.avi"
		list-type="picture-card"
		:limit="10"
		:on-success="handleUpload"
		:class="state.photoList.length === 10 ? 'hideUpload' : ''">
		<el-icon><Plus /></el-icon>
		<template #file="{ file }">
			<div>
				<img
					v-if="file.name.indexOf('.jpg') > -1
						|| file.name.indexOf('.png') > -1
						|| file.name.indexOf('.jpeg') > -1"
					:src="file.url"
					alt=""
					class="el-upload-list__item-thumbnail" />
				<video
					v-else-if="file.name.indexOf('.mp4') > -1
						|| file.name.indexOf('.mov') > -1
						|| file.name.indexOf('.avi') > -1"
					class="el-upload-list__item-thumbnail"
					style="width: 100%;height: 100%;"
					autoplay
					:src="file.url">
					<source :src="file.url" type="video/mp4" />
					<source :src="file.url" type="video/mov" />
					<source :src="file.url" type="video/avi" />
				</video>
				<span class="el-upload-list__item-actions">
					<span class="el-upload-list__item-preview" @click="handlePreview(file)">
						<el-icon><zoom-in /></el-icon>
					</span>
					<span
						v-if="!state.disabledBtn"
						class="el-upload-list__item-delete"
						@click="handleRemove(file)">
						<el-icon><Delete /></el-icon>
					</span>
				</span>
			</div>
		</template>
	</el-upload>
	<el-dialog v-model="state.dialogVisible">
		<img
			w-full
			:src="state.dialogImageFile.url"
			alt=""
			v-if="state.dialogImageFile.name.indexOf('.jpg') > -1
				|| state.dialogImageFile.name.indexOf('.png') > -1
				|| state.dialogImageFile.name.indexOf('.jpeg') > -1" />
		<video
			v-else-if="state.dialogImageFile.name.indexOf('.mp4') > -1
				|| state.dialogImageFile.name.indexOf('.mov') > -1
				|| state.dialogImageFile.name.indexOf('.avi') > -1"
			w-full
			style="width: 100%;height: 100%;"
			controls
			autoplay
			:src="state.dialogImageFile.url">
			<source :src="state.dialogImageFile.url" type="video/mp4" />
			<source :src="state.dialogImageFile.url" type="video/mov" />
			<source :src="state.dialogImageFile.url" type="video/avi" />
		</video>
	</el-dialog>
</el-form-item>

2、js部分

const state = reactive({
	photoList: [] as any,           // 上传图片
	dialogVisible: false as boolean,
	dialogImageFile: '' as any,
	disabledBtn: false as boolean,
});

// 预览图片和视频
const handlePreview = (file: any) => {
	state.dialogImageFile = file;
	state.dialogVisible = true;
}
// 删除图片视频
const handleRemove = (file: any) => {
	state.photoList.map((item: any, index: number) => {
		if(item.response && item.response.data) {
			if(item.response.data == file.response?.data || item.response.data == file.url) {
				state.photoList.splice(index, 1);
			}
		} else if(item.url) {
			if(item.url == file.response?.data || item.url == file.url) {
				state.photoList.splice(index, 1);
			}
		}
	})
}
// 上传图片
const handleUpload = (res: any) => {
	if(res.code != 0) {
		state.photoList.pop()
		ElMessage.error(res.msg)
	}
}

3、css部分

<style lang="scss" scoped>
    :deep(.hideUpload .el-upload--picture-card)  {
        display: none;
    }
    :deep(.el-upload--picture-card) {
        width: 243px;
        height: 180px;
    }
    :deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 243px;
        height: 180px;
    }
</style>