realty/virgo.wzfrontend/workark/src/components/common/upload.vue

<template>
	<div class="common-update">
		<div v-if="type === 'preview'">
			<div class="no-tips" v-if="fileList.length === 0">暂无附件</div>
			<div class="common-perview-image" v-else>
				<div class="common-update-image-box" v-for="(item,index) in fileList" :key="item.id">
					<div class="el-image video-image" v-if="item.type === 'mp4'">
						<div class="video-icon">
							<i class="el-icon-video-play" @click="openVideo(item)"></i>
						</div>
						<img :src="videoPreviewList[item.id]" class="el-image__inner">
					</div>
					<el-image :src="item.url" :preview-src-list="[item.url]" v-else>
						<div slot="error" class="image-slot">
							<el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
								<div class="image-text">
									<span>{{item.type.toUpperCase()}}</span>
									<div class="file-download">
										<i class="el-icon-download" @click="download(item)"></i>
									</div>
								</div>
							</el-tooltip>
						</div>
					</el-image>
				</div>
			</div>
		</div>
		<div v-else>
			<div class="common-update-image">
				<div class="common-update-image-box" v-for="(item,index) in fileList" :key="item.id">
					<div class="el-image video-image" v-if="item.type === 'mp4'">
						<div class="video-icon">
							<i class="el-icon-video-play" @click="openVideo(item)"></i>
						</div>
						<img :src="videoPreviewList[item.id]" class="el-image__inner">
					</div>
					<el-image :src="item.url" :preview-src-list="[item.url]" v-else>
						<div slot="error" class="image-slot">
							<el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
								<div class="image-text">{{item.type.toUpperCase()}}</div>
							</el-tooltip>
						</div>
					</el-image>
					<div class="common-update-close" @click="removeFile(index)">
						<i class="el-icon-close"></i>
					</div>
				</div>
				<el-upload :action="action" :headers="headers" :show-file-list="false" name="uploadFile"
					:before-upload="beforeUpload" :on-success="successFile" :on-error="errorFile" :accept="accept"
					v-if="fileList.length < maxLen" :on-progress="progress" :limit="maxLen" :on-exceed="handleExceed"
					:multiple="maxLen === 1 ? false : true">
					<div class="common-update-button">
						<i class="iconfont huifont-xinzeng"></i>
						<div class="common-update-button-label">{{text}}</div>
					</div>
				</el-upload>
			</div>
			<div class="update-image-tips"><span class="color-red">*</span> 请上传小于10M的文件</div>
		</div>
		<el-dialog :close-on-click-modal="false" :title="video.name" custom-class="monitor-dialog"
			:visible.sync="visible" width="900px" height="500px" :append-to-body="true">
			<div class="video-box">
				<video v-if="visible" width="900" height="445" controls>
					<source :src="video.url" type="video/mp4" />
				</video>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import config from '@/config';
	import {
		getToken
	} from '@/uitls/auth';
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			type: {
				type: String,
				default: 'preview'
			},
			maxLen: {
				type: Number,
				default: 5
			},
			text: {
				type: String,
				default: '上传图片'
			},
			accept: {
				type: String,
				default: '.png, .jpg, .jpeg'
			},
		},
		data() {
			return {
				action: config.baseURL + '/file/filenode/-1', //上传地址
				headers: {
					token: ''
				},
				url: '',
				srcList: [],
				fileList: [],
				videoPreviewList: {},
				visible: false,
				video: {}
			};
		},
		mounted() {
			this.headers.token = getToken();
			this.fileList = JSON.parse(JSON.stringify(this.list));
		},
		methods: {
			beforeUpload(file) {
				//上传前
				if ((parseInt(file.size) / 1024 / 1024) > 10) {
					//判断上传的文件不大于30M
					this.$message.warning('请上传小于10M的文件');
					return false;
				}
			},
			progress(e) {
				let percent = e.percent >= 100 ? 99 : parseInt(e.percent)
				this.$loading({
					percent: (percent + '%')
				});
			},
			successFile(response, file, fileList) {
				//上传成功
				if (!response.data) return this.errorFile();
				this.$message.success('上传成功');
				let data = response.data;
				let typeList = data.name.split('.');
				this.fileList.push({
					id: data.id,
					name: data.name,
					url: data.node.url,
					type: typeList[typeList.length - 1]
				});
				this.$loading.close();
			},
			errorFile() {
				//上传失败
				this.$message.error('上传失败');
				this.$loading.close();
			},
			removeFile(index) {
				this.$confirm('确定要删除该文件?', () => {
					this.fileList.splice(index, 1);
				});
			},
			download(item) {
				window.location.href = config.baseURL + '/file/filenode/' + item.id;
			},
			openVideo(item) {
				this.video = item;
				this.visible = true;
			},
			handleExceed(files, fileList) {
				this.$message.warning('最多上传' + this.maxLen + '个文件,当前已上传' + fileList.length + '个文件，请重新选择');
			},
			mp4Preview(item) {
				const video = document.createElement('video') // 也可以自己创建video
				video.src = item.url // url地址 url跟 视频流是一样的
				video.crossOrigin = '*' // 解决跨域问题，也就是提示污染资源无法转换视频
				video.currentTime = 1 // 第一帧
				video.oncanplay = () => {
					let canvas = document.createElement('canvas') // 获取 canvas 对象
					const ctx = canvas.getContext('2d') // 绘制2d
					canvas.width = video.clientWidth ? video.clientWidth : 320 // 获取视频宽度
					canvas.height = video.clientHeight ? video.clientHeight : 320 //获取视频高度
					// 利用canvas对象方法绘图
					ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
					// 转换成base64形式
					const videoFirstImgsrc = canvas.toDataURL('image/png') // 截取后的视频封面
					this.videoPreviewList[item.id] = videoFirstImgsrc;
					this.$forceUpdate();
					video.remove()
					canvas.remove();
				}
			}
		},
		watch: {
			list(val) {
				this.fileList = JSON.parse(JSON.stringify(val));
			},
			fileList() {
				for (let i = 0; i < this.fileList.length; i++) {
					if (this.fileList[i].type === 'mp4') {
						this.mp4Preview(this.fileList[i])
					}
				}
			}
		},
	}
</script>

<style lang="scss">
	.el-dialog.monitor-dialog {
		height: 500px;
		margin-top: 20vh !important;
	}

	.common-update {
		display: flex;
		flex-wrap: wrap;

		.update-image-tips {
			font-size: 12px;
			opacity: 0.7;
		}

		.video-image {
			cursor: pointer;
			position: relative;

			&:hover {
				.video-icon {
					opacity: 1;
				}
			}

			.video-icon {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(0, 0, 0, 0.6);
				opacity: 0;
				transition: opacity 200ms;

				i {
					font-size: 24px;
				}
			}
		}

		.common-update-button {
			width: 100px;
			height: 100px;
			border: 1px dashed $--border-color-base;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 4px 0;

			.huifont-xinzeng {
				line-height: 20px;
				font-size: 20px;
			}

			.common-update-button-label {
				font-size: 14px;
				line-height: 20px;
				padding-top: 10px;
			}
		}

		.common-perview-image {
			display: flex;
			flex-wrap: wrap;

			.el-image {
				width: 64px;
				height: 64px;
				border-radius: 2px;
				background: transparent;
			}
		}

		.image-slot {
			width: 100%;
			height: 100%;
			border-radius: 4px;
			background: #253642;
			position: relative;

			.file-download {
				position: absolute;
				display: none;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				background: rgba(0, 0, 0, 0.8);
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				color: #fff;
				cursor: pointer;
			}

			.image-text {
				font-size: 20px;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-weight: bold;

				&:hover {
					.file-download {
						display: flex;
					}
				}
			}

		}

		.common-update-image-box {
			display: flex;
			position: relative;
			margin-right: 4px;
		}

		.common-update-image {
			display: flex;
			flex-wrap: wrap;

			.common-update-image-box {
				margin: 4px 8px 4px 0;
			}

			.el-image {
				width: 100px;
				height: 100px;
				border-radius: 2px;
				background: transparent;
			}

			.common-update-close {
				position: absolute;
				right: -7px;
				top: -7px;
				background: $--color-danger;
				width: 14px;
				height: 14px;
				line-height: 14px;
				text-align: center;
				border-radius: 50%;
				font-size: 10px;
				cursor: pointer;
				color: #fff;
			}
		}
	}
</style>