结合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>
相关推荐
LuckyLay8 分钟前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu16826 分钟前
aksk前端签名实现
java·前端·javascript
烛阴32 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw037 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
南岸月明1 小时前
我与技术无缘,只想副业搞钱
前端
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky2 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin2 小时前
前端八股-promise
前端·javascript
星语卿2 小时前
浏览器重绘与重排
前端·浏览器