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

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

1、html部分

htlm 复制代码
<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部分

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部分

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>
相关推荐
yanlele3 分钟前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 分钟前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友12 分钟前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir13 分钟前
vue3.2 前端动态分页算法
前端·算法
烛阴1 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子1 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge